:root {
    --main: #008dd1;
    /* --main: var(--bs-link-color); */

    --darken-main: var(--bs-link-hover-color);
    --white: #fff;
    --white-bg: var(--bs-tertiary-bg);

    --black: #000;
    --dark: var(--bs-dark);
    --dark-hover: rgba(234, 234, 255, 0.05);
    --green: #46a023;

    --page-bg: var(--bs-body-bg);
    --transparent: transparent;
    --light-grey: var(--bs-gray-400);
    --grey: var(--bs-gray);
    --grey-transparent: var(--bs-gray-200);
    --dark-grey: var(--bs-gray-900);

    --selection: var(--bs-gray-900);
    --desktop-fs: calc(1.26rem + 0.12vw);

    --active: var(--bs-success);
    --inactive: var(--bs-form-invalid-color);
    --default-gradiant: #027AC6, #009ED8, #00BECC;
    --box-shadow: #4c4e6438 0px 2px 10px 0px;

    --home-icon-color: var(--bs-gray-600);
    --home-icon-bg: var(--bs-gray-800);

    --main-bg-icon: var(--bs-focus-ring-color);
    --green-bg-icon: #46a0231f;
}

[data-bs-theme=dark] {

    --main: var(--bs-link-color);

    --darken-main: var(--bs-link-hover-color);
    --white: #fff;
    --white-bg: var(--bs-tertiary-bg);

    --black: #fff;
    --dark: var(--bs-tertiary-bg);
    --dark-hover: rgba(234, 234, 255, 0.05);
    --green: var(--bs-warning);


    --page-bg: var(--bs-body-bg);
    --transparent: transparent;
    --light-grey: var(--bs-gray-400);
    --grey: var(--bs-gray);
    --grey-transparent: var(--bs-gray-200);
    --dark-grey: var(--bs-gray-900);

    --selection: var(--bs-gray-900);
    --desktop-fs: calc(1.26rem + 0.12vw);

    --active: var(--bs-success);
    --inactive: var(--bs-form-invalid-color);
    --default-gradiant: #027AC6 0%, #009ED8 33%, #00BECC 66%, #00D8AB 100%;
    --box-shadow: #4c4e6438 0px 2px 10px 0px;

    --home-icon-color: var(--bs-gray-600);
    --home-icon-bg: var(--bs-gray-800);

    --main-bg-icon: var(--bs-focus-ring-color);
    --green-bg-icon: #fdb5281f;
}

[data-bs-theme=oops] {

    --main: #556;
    --darken-main: #451;
    --white: #ff0000;
    --white-bg: #fff000;
    --black: #fff;
    --dark: #ff0000;
    --dark-hover: rgba(0, 0, 255, 0.05);
    --green: #006108;
    --page-bg: #00ffd5;
    --transparent: transparent;
    --light-grey: var(--bs-gray-400);
    --grey: var(--bs-gray);
    --grey-transparent: var(--bs-gray-200);
    --dark-grey: var(--bs-gray-900);

    --selection: var(--bs-gray-900);
    --desktop-fs: calc(1.26rem + 0.12vw);

    --active: var(--bs-success);
    --inactive: var(--bs-form-invalid-color);
    --default-gradiant: #027AC6 0%, #009ED8 33%, #00BECC 66%, #00D8AB 100%;
    --box-shadow: #0015ff38 0px 2px 10px 0px;

    --home-icon-color: linear-gradient(-90deg, var(--default-gradiant)) !important;
    --home-icon-bg: linear-gradient(-90deg, var(--default-gradiant)) !important;

    --main-bg-icon: var(--bs-focus-ring-color);
    --green-bg-icon: #fdb5281f;
}


.ticket-collapse.collapsed i {
    transform: rotate(180deg);
}

.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.blue-badge {
    background-color: rgba(var(--bs-link-color-rgb), .15);
    color: var(--main);
}

.red-badge {
    background-color: rgba(211, 65, 64, .15);
    color: var(--inactive);
}

S .ticket-pj-image {
    width: 50px;
    height: auto;
}

.ticket-text-message {
    height: auto;
    border-left: 0;
    border-bottom: 0;
    line-height: 1rem;
}

@media (min-width: 576px) {
    .ticket-text-message {
        height: 150px;
    }

    .ticket-pj-image {
        width: 75px;
    }
}

#btn-notification:hover {
    background: var(--dark-hover);
}

.ticket-statut>div {
    border-radius: 50%;
    background: linear-gradient(90deg, var(--default-gradiant));
    height: 50px;
    width: 50px;
    box-shadow: var(--box-shadow);
}

.shadow-box {
    box-shadow: var(--box-shadow);
}

.suivi-detail-icon .suivi-detail {
    visibility: hidden;
}

.suivi-detail-icon:hover .suivi-detail {
    visibility: visible;
}

table.table thead th {
    width: auto
}

.active-sidebar-link,
.sidebar-links li a:active {
    background: linear-gradient(90deg, var(--default-gradiant)) !important;
}

.bg-main {
    background-color: var(--main);
}

.navbar-head {
    border-bottom: 1px solid var(--grey);
}

i {
    -webkit-text-stroke: .2px
}

.badge-notif {
    top: 10%;
    right: 0%;
}

.dd-notification:hover {
    background: var(--grey-transparent);
}

main {
    transition: all .3s ease-in-out;
    display: flex;
    flex-direction: column;
}

#main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#tickets-show-main {
    flex-grow: 1;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 100px;
}

.chart-container canvas {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.login-container {
    height: 100vh;
}

#app {
    min-height: 100vh;
}

#app main {
    flex-grow: 1
}

.sidebar.collapsed {
    width: 60px;
}

.sidebar.collapsed a div.sidebar-text {
    display: none;
}

.sidebar.collapsed .sidebar-links li>a div.sidebar-text {
    display: none;
}

.sidebar.collapsed .sidebar-links li>a {
    justify-content: center;
}

.sidebar .sidebar-links li>a:hover {
    background: var(--dark-hover);
}

.sidebar {
    width: 250px;
    max-height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--dark);
    color: var(--white);
    transition: all 0.3s ease-out;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-toggle {
    transform: rotate(180deg);
}

.sidebar:not(.collapsed) .sidebar-links {
    padding: .5rem 1rem !important;
}

.sidebar-links.collapsed {
    padding: none;
}

/* ::selection {
    color: var(--white);
    background-color: var(--selection);
} */

#home-client table * {
    background-color: var(--white-bg);
}

.dropdown-menu.home-client>li a:hover {
    background: var(--grey-transparent);
}

.pub-add-dot {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 0;
}

.pub-add-dot>div {}

.pub-add-dot>div a {
    font-size: 3rem;
}

.pub-add-dot>div a.active {
    color: var(--white);
}

.pub-add-dot>div a:not(.active) {
    color: var(--dark-grey);
}

.col-pub-add {
    background: var(--main) !important;
    color: var(--white);
    position: relative;
}

.resume-icon {
    max-width: 50px !important;
    height: auto !important;
}

.icon-blue {
    color: var(--main);
    background-color: var(--main-bg-icon) !important;
}

.icon-yellow {
    color: var(--green);
    background-color: var(--green-bg-icon) !important;
}

.icon-grey {
    color: var(--home-icon-color);
    background-color: var(--grey-transparent) !important;
}

#home-client .dropdown-toggle::before {
    content: none !important;
}

#home-client>.row>div {

    box-shadow: var(--box-shadow);
    background-color: var(--white-bg);
}

#home-client .row {
    padding: 0 !important;
    margin: 0 !important;
}

#home-client .row .row .col,
#home-client .row .row .col-auto {
    padding: 0;

}

table {
    overflow-x: auto;
}

body {
    background: var(--page-bg);
}

.btn-check:checked+.btn {
    background-color: var(--main) !important;
    border: #008DD1;
    color: var(--white) !important;
}

.switch-input {
    margin: 0 !important;
}

.switch-input:checked {
    background-color: var(--active) !important;
}

.switch-input:not(:checked) {
    background-color: var(--inactive) !important;
}

.form-switch {
    flex-wrap: wrap;
    gap: 10px;
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-color: var(--inactive);
}

a {
    text-decoration: none !important;
}

.text-add {
    color: #008dd1 !important;
}

.btn-green {
    background-color: rgb(0, 200, 117);
}


gradient-text {
    background: linear-gradient(90deg, var(--default-gradiant));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-head {
    background-color: var(--page-bg);
}

.btn-manager-add {
    background: var(--transparent);
    color: var(--main);
}

.btn-manager-delete {
    background: var(--transparent);
    color: var(--inactive);
}

.btn-manager-delete-ticket {
    background: var(--inactive);
    color: var(--white);
    outline: solid 1px var(--inactive);
}

.btn-manager-validate-ticket {
    background: green;
    color: var(--white);
    outline: solid 1px green;
}

.btn-manager-submit {
    background: var(--main);
    color: var(--white);
    outline: solid 1px var(--main);
}

.btn-manager-go-back {
    background: var(--transparent);
    color: var(--main);
    outline: solid 1px var(--main);
}

.btn-manager-validate-ticket,
.btn-manager-delete-ticket,
.btn-manager-delete,
.btn-manager-add,
.btn-manager-submit,
.btn-manager-go-back {
    text-align: center;
    vertical-align: middle;
    border: none;
}

.btn-manager-delete:hover,
.btn-manager-add:hover {
    color: var(--white);
}

.btn-manager-delete:hover {
    background: var(--inactive);
}

.btn-manager-add:hover {
    background: var(--main);
}

.btn-manager-go-back:hover {
    background: var(--grey-transparent);
}

.btn-manager-submit:hover {
    background: var(--darken-main);
    color: var(--white);
}

/* .btn-manager-delete-ticket:hover {
    background: var(--darken-main);
    color: var(--white);
} */

.btn-nav {
    background: var(--transparent);
    border: none;
    font-size: var(--desktop-fs);
}

.btn-nav:hover {
    background: var(--grey-transparent);
    outline: 1px solid var(--white-bg);
}

.nav-link {
    background: var(--transparent) !important;
    display: flex !important;
    padding: 0.5rem 1rem !important;
    align-items: center;
    font-size: var(--desktop-fs) !important;
}

.nav-link:hover {
    background: var(--grey-transparent) !important;
}

.nav-link-page {
    background: var(--transparent);
    display: flex !important;
    padding: 0.5rem 1rem !important;
    align-items: center;
    border: none;
    font-size: calc(var(--desktop-fs)/1.2) !important;
    border: 2px solid var(--transparent);
}

.nav-link-page.active {
    color: var(--darken-main);
    border-bottom: 2px solid var(--main);
}

.livewire-thead-th,
.livewire-thead-th-active {
    vertical-align: middle;
    font-size: calc(var(--desktop-fs)/1.4) !important;
    white-space: nowrap;
}

.livewire-thead-th:hover,
.livewire-thead-th-active:hover {
    cursor: pointer;
}

.livewire-thead-th-active,
.livewire-thead-th:hover {

    background: var(--grey-transparent);
    color: var(--main) !important;
}

.bg-active {
    background: var(--active);
}

.bg-not-active {
    background: var(--inactive);
}

.livewire-detail {
    color: var(--main);
}

.livewire-detail:hover {
    text-decoration: underline !important;
}


.alert-error {
    background: #f8d7da !important;
}

.btn-action-table {
    background: var(--grey-transparent);
    color: var(--black);
    text-align: center;
    border: none;
    display: block;
}

.btn-home-admin {
    background-color: var(--main);
    color: var(--white);
    border: none;
    display: block;
}

.btn-action-update:hover,
.btn-action-destroy:hover {
    color: var(--white);
    cursor: pointer;
}

.btn-action-update:hover {
    background: var(--main);
}

.btn-action-destroy:hover {
    background: var(--inactive);
}

.btn-popup-destroy {
    text-align: center;
    border: none;
    display: block;
}

.btn-popup-destroy-confirm {
    background: var(--inactive);
    color: var(--white);
}

.cursor-pointer:hover {
    cursor: pointer;
}

.ticket-non-vu-admin {
    border-left: 2px solid var(--black);
}

.outside-gradiant {
    color: var(--black);
}

.outside-gradiant:hover {
    text-decoration: underline !important;
}

.ticket-detail-container {
    max-height: 100%;
}

.messages-container {
    max-height: calc(100vh - 300px);
    overflow-y: scroll;
}

.btn-manager-submit-message {
    background: var(--transparent);
    color: var(--black);
    text-align: center;
    vertical-align: middle;
    border: none;
}

.btn-manager-submit-message:hover {
    background: var(--grey-transparent);
}

.text-grey {
    background: var(--grey-transparent);
    color: var(--black);
}


.text-blue {
    background: #028cc61f;
    color: var(--black);
}

.offset-left {
    margin-left: 12vw !important;
}

.offset-right {
    margin-right: 12vw !important;
}

.messages-container {
    font-size: calc(var(--desktop-fs)*.75);
}

.ticket-message-form {
    background-color: linear-gradient('to top', #40576d, #627084, #848b9c, #a5a7b4, #c5c5cd, #d4d4d9, #e4e3e6, #f3f3f3, #f6f6f6, #f9f9f9, #fcfcfc, #ffffff);
}

.color-active {
    color: var(--active);
}

.color-inactive {
    color: var(--inactive);
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-control-plaintext~label,
.form-floating>.form-select~label {
    font-weight: bold;
}

/* input:not([role="switch"]):not(.form-check-input),
textarea,
select {
    border-color: var(--light-grey) !important;
    background-color: var(--white) !important;
    border-radius: unset !important;
} */

.bg-white {
    background-color: var(--white-bg);
}

.color-white {
    color: var(--white);
}

.card {
    border: none !important;
}

.fade:not(.active):not(.show) {
    display: none;
}

.projet-icon-client {
    color: var(--black);

}

.projet-icon-client:hover {
    color: var(--main);
}

.projet-div-client {
    display: flex;
    height: 100%;
    gap: 1rem;
}

img {
    box-shadow: var(--box-shadow);
}

.progress-bar {
    border-radius: none !important;
}

.pagination {
    --bs-pagination-padding-x: .75rem;
    --bs-pagination-padding-y: .375rem;
    --bs-pagination-font-size: .9rem;
    --bs-pagination-color: #008DD1 !important;
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #008DD1 !important;
    --bs-pagination-active-border-color: #008DD1 !important;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    display: flex;
    padding-left: 0;
    list-style: none;
}

.form-check-input:checked {
    background-color: #008DD1 !important;
    border-color: #008DD1 !important;
}

/* Ajoutez ces styles CSS dans votre fichier CSS ou dans une balise <style> */
.loader {
    display: none;
}

[data-bs-theme="dark"] td {
    background-color: #18181B !important;

    color: white !important;

}

[data-bs-theme=dark] .text-dark {
    color: var(--white) !important;
    /* Override text-dark in dark mode */
}

[data-bs-theme=dark] .bg-white {
    background-color: var(--bs-dark) !important;
}

[data-bs-theme=dark] .text-muted {
    color: #343434 !important;
}



[data-bs-theme=dark] .text-admin,
.text-client {
    /*background-color: #f0f8ff;*/
    color: #000;

}

[data-bs-theme=dark] .border-object {
    border-top-color: #212529 !important;
    border-bottom-color: #212529 !important;
    border-right: none;

}

[data-bs-theme=dark] .border-view {
    border-top-color: #212529 !important;
    border-left: none;
    border-bottom-color: #212529 !important;
}

/*style="border-left: 4px solid #F0F5F9; border-top: 3px solid white; border-bottom: 3px solid white;"*/
[data-bs-theme=dark] td {
    border: solid 3px #212529;
    background-color: #18181B !important;
    padding: 1px !important;
}

[data-bs-theme=dark] .card-dark {
    background-color: #18181B !important;
}

[data-bs-theme=dark] th {
    border: solid 3px #212529;
    background-color: #18181B !important;
    padding: 1px !important;
}

/* Troll theme */

[data-bs-theme="oops"] td,
[data-bs-theme="oops"] th,
[data-bs-theme="oops"] .card-dark,
[data-bs-theme="oops"] .page-head,
[data-bs-theme="oops"] .border-view,
[data-bs-theme="oops"] .border-object,
[data-bs-theme="oops"] .text-admin,
[data-bs-theme="oops"] .text-muted,
[data-bs-theme="oops"] .bg-white,
[data-bs-theme="oops"] .container-fluid,
[data-bs-theme="oops"] .text-dark {
    animation-name: trollColorChange;
    animation-duration: 0.5s; /* Vitesse plus rapide pour l'effet troll */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border: solid 3px #000; /* Bordure noire fixe pour un contraste */
}
[data-bs-theme="oops"] td {
    background-color: black;
}
[data-bs-theme="oops"] .sidebar-text {
    animation-name: trollColorChange;
    animation-duration: 0.5s; /* Vitesse plus rapide pour l'effet troll */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/* Keyframes pour des changements de couleur rapides */
@keyframes trollColorChange {
    0% {
        background-color: red;
        color: white;
    }
    10% {
        background-color: blue ;
        color: yellow;
    }
    20% {
        background-color: green;
        color: black;
    }
    30% {
        background-color: orange;
        color: pink;
    }
    40% {
        background-color: purple;
        color: cyan;
    }
    50% {
        background-color: lime;
        color: magenta;
    }
    60% {
        background-color: yellow;
        color: blue;
    }
    70% {
        background-color: pink;
        color: green;
    }
    80% {
        background-color: cyan;
        color: red;
    }
    90% {
        background-color: magenta;
        color: orange;
    }
    100% {
        background-color: red;
        color: white;
    }
}

[data-bs-theme=oops] .border-object {
    border-top-color: #ff9100 !important;
    border-bottom-color: #7a007a !important;
}

[data-bs-theme=oops] .border-view {
    border-top-color: #ff0095 !important;
    border-bottom-color: #0400ff !important;
}
[data-bs-theme="round"] * {
    border-radius: 100% !important;
}

/* Affichage emoji */
.emoji-container {
    display: none; /* Masqué par défaut */
    position: absolute;
    border: 1px solid #ccc;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    max-width: 200px;
    flex-wrap: wrap;
    z-index: 10;
    height: 150px;
    overflow-y: auto; /* Ajoute un défilement vertical si nécessaire */
    flex-wrap: wrap;
  }
  .emoji {
    font-size: 24px;
    padding: 5px;
    cursor: pointer;
  }
  .emoji:hover {
    background-color: #f0f0f0;
    border-radius: 5px;
  }