/*:root {
	--bg-color:  #e5e8eb;
	--bg-color:  #d9d9ff ;
	--btn-primary: #714B67;
	--btn-secondary: #017E8480;
	--secondary: #017E84;
	--navbar-bg: #714B67;
	--text-btn-color: white;
	--table-border-color: #714b6740;
	--btn-default-hover-bg: white;
	--sidebar-select-color: #017E8420;
	--checkbox-gradient: linear-gradient(180deg, var(--btn-primary) -124.51%, var(--btn-primary) 100%);
	--text-base: 16px;
	--text-sm: 14px;
}*/

:root {
        /* Arrière-plan global de la page (effet gris chaud/beige clair sous le formulaire) */
        --bg-color: #f4f3ef; 

        /* Couleur de la marque / Boutons principaux (Bleu sarcelle / Teal foncé) */
        --btn-primary: #0f766e;
        
        /* Boutons secondaires et accents */
        --btn-secondary: rgba(15, 118, 110, 0.5); /* #0f766e avec 50% d'opacité */
        --secondary: #0d9488;

        /* Barre supérieure (Navbar globale harmonisée avec la couleur de la marque) */
        --navbar-bg: #0f766e;

        /* Texte des boutons principaux */
        --text-btn-color: white;

        /* Bordures des tableaux et séparateurs */
        --table-border-color: rgba(15, 118, 110, 0.25);

        /* Comportement au survol des boutons par défaut */
        --btn-default-hover-bg: #ffffff;

        /* Couleur de l'élément sélectionné dans la barre latérale */
        --sidebar-select-color: rgba(13, 148, 136, 0.2);

        --sidebar-active-color: #000;
        --sidebar-hover-color: #000;

        /* Dégradé des cases à cocher basé sur le bleu sarcelle */
        --checkbox-gradient: linear-gradient(180deg, var(--btn-primary) -124.51%, var(--btn-primary) 100%);

        /* Tailles de texte de base */
        --text-base: 16px;
        --text-sm: 14px;
        --surface-menu-bar: #1e293b;        
}

/* login page */

[data-path="login"] .navbar-light {
	border-bottom: 1px solid var(--blue-400) !important;
	background: white;
}

[data-path="login"] .web-footer {
	border-top: 1px solid var(--blue-400) !important;
}

.for-login .page-card {
	border: unset !important;
}

.for-login .btn-login{
	background-color: var(--blue-800) !important;
	border: none !important;
	color: white;
}

.for-login .btn-login:hover{
	background-color: var(--blue-600) !important;
	border: none !important;
	color: white;
}

.for-login .page-card-head h4 {
	color: black !important;
}

.for-login .form-control, .for-login .form-control{
	background-color: white !important;
	border: solid 1px var(--blue-400) !important;
}

.for-login .form-control:focus, .for-login .form-control:hover{
	box-shadow: 0 0 0 1px var(--blue-300) !important;
}

.for-login .page-card .page-card-body .forgot-password-message>* {
	color: var(--blue-600) !important;
}

/* Container adjustment to push content to the right */
[data-path="login"] .page-container {
    display: flex;
    justify-content: flex-end; /* Pushes the card to the right */
    padding-right: 10%; /* Adjust this to control how far from the right edge it sits */
}

/* Updated .for-login styles */
.for-login {
    width: 100%;
    max-width: 400px;
    margin-top: 100px;
    border: 1px solid var(--blue-400) !important;
    border-radius: 12px;
    background-color: white !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    float: right;
}

/* Responsive fix: Center the login card on mobile devices */
@media (max-width: 768px) {
    [data-path="login"] .page-container {
        justify-content: center;
        padding-right: 0;
    }
    
    .for-login {
        margin-top: 50px;
        max-width: 100%;
        float: none;
    }
}


[data-path="login"] {
    background-image: url(/assets/newara/css/bgdemo.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

=
/* NAVBAR DESIGNE */

.navbar .navbar-expand span, 
.navbar .navbar-expand li a,
#navbar-breadcrumbs a,
.navbar .nav-item button.nav-link{ 
    color: var(--btn-default-hover-bg) !important;

}

.navbar-breadcrumbs li a {
    color: #84dad7 !important; 
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.navbar-breadcrumbs li:last-child > a {
    color: #a9efed !important; 
}

.navbar-breadcrumbs .icon {
    stroke: #84dad7 !important;
}

.navbar-breadcrumbs li a:hover,
.navbar-breadcrumbs .icon:hover  {
   color: #a9efed !important;
   text-decoration: none;
}

#navbar-breadcrumbs li.disabled a {
  color: var(--white-overlay-400) !important;
}

.nav-tabs{ 
	border:none;
}

.navbar-breadcrumbs li::before, 
.navbar-breadcrumbs li::after,
.breadcrumb-item::before {
    color: #0d9488 !important; /* Le même vert lumineux que vos libellés */
    opacity: 1 !important;
}

.search-bar span {
	color: var(--neutral-black) !important;
}

/* PAGE DESIGN */

body .page-container { 
	background: none !important;
}

.main-section {
    background: linear-gradient(-45deg, var(--gray-100), var(--purple-400)) !important;
}

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

.page-wrapper {
    height: 100vh;
    background: var(--green-100) !important;
}

.es-icon {
	@extend .icon;
	fill :  #017E8480 !important; 
	stroke:  #017E8480 !important;
}

.page-content .list-view .layout-main-section{
        background-color: white;
}

.datatable .dt-cell {
  background-color: #fff !important;
}

/* DASHBOARD DESIGN */
.desk-sidebar-item{
	line-height: 2.2;
}

.widget.links-widget-box, .widget.dashboard-widget-box {
	border: 1px solid #714B6780;
}

.widget.links-widget-box .widget-head .widget-label .widget-title{
	background-color: white;
	color: #714B67 !important;
}

.widget-body .link-item{
	margin-bottom: 5px !important;
}

.icon-md {
	width: 30px;
	height: 30px;
}

.onboard-spotlight {
	color: var(--secondary) !important;
}

a.onboard-spotlight .link-content:hover {
	color: var(--btn-secondary) !important;
}

.dropdown-notifications .es-icon{
	@extend .icon;
	fill :  white !important; 
	stroke:  white !important;
}

/* LIST GRID DESIGN */

.list-filters .form-control, .standard-filter-section .form-control, .standard-filter-section .form-control {
	box-shadow: 0 0 0 1px rgba(124, 124, 124, 0.25) !important;
}

.level.list-row-head, .level.list-row-head .level-item {
	font-weight:bold;
	background-color: var(--gray-300);
}
.list-row-container .list-row:hover{
	background-color: var(--sidebar-select-color);
}

.list-filters .form-control:focus, .list-filters .form-control:hover,
.standard-filter-section .form-control:focus, .standard-filter-section .form-control:hover {
	box-shadow: 0 0 0 2px rgba(124, 124, 124, 0.25) !important;
}

/*  FORM DESIGN  */
.form-control, .frappe-control .ql-editor:not(.read-mode){
	box-shadow: 0 0 0 1px rgba(124, 124, 124, 0.25) !important;
}

.ace_editor {
	box-shadow: 0 0 0 1px rgba(124, 124, 124, 0.25) !important;
}

.ql-editor:focus, .ace_editor:focus{
	box-shadow: 0 0 0 2px rgba(124, 124, 124, 0.25) !important;
}

.form-control:focus, .form-control:hover{
	box-shadow: 0 0 0 2px #714b6780 !important;
}

.form-control:focus {
	background-color: #714b6725;
}

.frappe-control:not([data-fieldtype="MultiSelectPills"]):not([data-fieldtype="Table MultiSelect"]).has-error input:hover,
.frappe-control:not([data-fieldtype="MultiSelectPills"]):not([data-fieldtype="Table MultiSelect"]).has-error input:focus
{
	box-shadow: 0 0 0 2px #eb909180 !important;
}

.frappe-control:not([data-fieldtype="MultiSelectPills"]):not([data-fieldtype="Table MultiSelect"]).has-error input{
	box-shadow: none !important;
}

option {
	 background-color: white !important;
}

.grid-heading-row .filter-row, .awesomplete [role="listbox"] {
	background-color: white !important;
}

.grid-row-open{
	box-shadow: 0 0 0 3px #714b67 !important;
}

.awesomplete [role="option"]:hover,  .awesomplete li:hover{
	background-color: var(--gray-300) !important;
}

input[type="checkbox"]:checked {
	background-color: var(--btn-secondary) !important;
	background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"),var(--checkbox-gradient) !important;
}

.datepicker {
	 background-color: var(--bg-color) !important;
}

/* BUTTONS DESIGN */ 
.btn{
	border-radius: 0.25rem !important;
}

.btn.btn-primary{
	background: #714b67 !important;
	color: var(--text-btn-color);
	border: solid 2px #714b67 !important;
}

.btn.btn-primary:hover {
	background: var(--btn-default-hover-bg) !important;
	border: solid 2px #714b67 !important;
	color: var(--text-color);
  }

.standard-actions .btn.btn-secondary, .timeline-content .btn.btn-secondary {
	background-color: var(--secondary) !important;
        border: solid 2px var(--secondary) !important;
	color: var(--text-color);
}

.standard-actions .btn.btn-secondary:hover, 
.timeline-content .btn.btn-secondary:hover {
	background: var(--btn-default-hover-bg) !important;
    	border: solid 2px var(--secondary) !important;
	color: var(--text-btn-color);
}

.custom-actions .btn.btn-default{
	background: var(--secondary) !important;
        border: solid 2px var(--secondary) !important;
	color: var(--text-btn-color);
}

.custom-actions .btn.btn-default:hover{
	background: var(--btn-default-hover-bg) !important;
    	border: solid 2px var(--secondary) !important;
	color: var(--text-color);
}

.btn.btn-secondary .es-icon{
	@extend .icon;
	fill :  white !important; 
	stroke:  white !important;
}

.btn.btn-default {
	background: var(--btn-default-hover-bg) !important;
    border: solid 1px var(--btn-secondary) !important;
    color: var(--text-color);
}

.btn.grid-add-row{
	background: var(--btn-default-hover-bg) !important;
    border: solid 1px var(--btn-secondary) !important;
    color: var(--text-color);
}

.btn.btn-new-doc{
	background-color: #714b67 !important;
	color: var(--text-btn-color);
	border: solid 2px #714b67 !important;
}

.btn.btn-new-doc:hover{
	background: var(--btn-default-hover-bg) !important;
	border: solid 2px #714b67 !important;
	color: var(--text-color);
}

.custom-actions .btn{
	font-size: 14px !important;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle), div#driver-popover-item .driver-popover-footer .btn-group > button:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn, div#driver-popover-item .driver-popover-footer .btn-group > .btn-group:not(:last-child) > button {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;  
}

.btn-group > .btn:not(:first-child), div#driver-popover-item .driver-popover-footer .btn-group > button:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn, div#driver-popover-item .driver-popover-footer .btn-group > .btn-group:not(:first-child) > button {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* POS DESIGN */

.point-of-sale-app section { 
	min-height: 40rem !important;
}

.client-wrapper ul {
	padding-left: 22px;
	margin-top: 0; 
	margin-bottom:0;
}

.client-wrapper li {
  float: left;
  list-style-type: none;
}

.client-wrapper li a { 
	display: inline-block;
	text-decoration: none;
	width: 100%; 
	background-color: var(--gray-300) !important; 
	color: black; 
	text-align: center;
}

.client-wrapper li a.plus-pos, .client-wrapper li a.plus-pos:focus, .client-wrapper li a.plus-pos:hover{
        background-color: var(--gray-400) !important;
}

.client-wrapper li a.minus-pos, .client-wrapper li a.minus-pos:focus, .client-wrapper li a.minus-pos:hover{
	background-color: var(--red-400) !important;
}

.client-wrapper li a:focus,
.client-wrapper li a:hover {
  background-color: var(--gray-400) !important;
  color: black;
}

.client-wrapper li a.active {
  background-color:  white !important;
  color: black;
}

/* Notification */
.notifications-list {
 background-color: var(--gray-300) !important;
 box-shadow: rgba(0, 0, 0, 0.1) -8px 8px 8px !important;
}

/* Style des alertes de bureau (Toast notifications) */
.alert-container {
    right: 20px !important;
    top: 60px !important;
}

.frappe-alert {
    background-color: #2c3e50; /* Couleur sombre pro */
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    border: 1px solid #34495e;
}

/* Modifier la couleur selon le type de notification */
.frappe-alert[data-alert-type="indicator-blue"] {
    border-left: 5px solid #3498db;
}

.frappe-alert[data-alert-type="indicator-red"] {
    border-left: 5px solid #e74c3c;
}


.layout-main-section-wrapper {
   /* background-color: var(--gray-300) !important;*/
}

.layout-side-section {
    background-color: var(--gray-100) !important;    
}

.frappe-menu {
    background-color: var(--surface-menu-bar) !important;
    color: #f1f5f9; 
}

.frappe-menu .icon{
    stroke: #f1f5f9;
}

.title-container, .title-container .header-subtitle, .text-ink-gray-7,
.sidebar-item-label, .avatar-name-email   {
    color: #f1f5f9 !important;
}

.text-secondary {
  color: #ccc !important;
}