/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS*/
/*
================================================================================
Odoo-Inspired CSS Theme for Dolibarr
================================================================================
Goal: To provide a clean, modern, and professional user interface for Dolibarr,
drawing inspiration from the Odoo ERP aesthetic. This theme focuses on
color palette, typography, spacing, and modernizing key UI components.
================================================================================
*/

/* --- 1. Core Variables & Body Styles --- */
:root {
--odoo-purple: #714b67;
--odoo-purple-dark: #5f3f56;
--odoo-light-gray: #f8f9fa;
--odoo-medium-gray: #e9ecef;
--odoo-dark-gray: #6c757d;
--odoo-text-color: #495057;
--odoo-border-radius: 6px;
--odoo-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

body,
.body-tag {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: var(--odoo-light-gray) !important;
color: var(--odoo-text-color);
font-size: 14px;
}

/* --- 2. Main Navigation & Header --- */
#mainmenutd {
background-color: #ffffff !important;
border-right: 1px solid var(--odoo-medium-gray);
}

#tmenudiv {
background: var(--odoo-purple) !important;
box-shadow: var(--odoo-box-shadow);
border-bottom: none;
}

.mainmenu {
border-bottom: none !important;
}

.mainmenu a.mainmenu,
.mainmenu a.mainmenu:hover,
.mainmenu a.mainmenu:link,
.mainmenu a.mainmenu:visited {
color: #ffffff !important;
font-weight: 500;
}

#mainmenutd .mainmenu a {
color: var(--odoo-text-color) !important;
font-weight: 500;
padding: 12px 10px !important;
border-radius: var(--odoo-border-radius);
margin: 4px;
transition: background-color 0.2s ease, color 0.2s ease;
}

#mainmenutd .mainmenu a:hover {
background-color: var(--odoo-purple) !important;
color: #ffffff !important;
}

/* Selected menu item */
#mainmenutd .mainmenu a.menu_choisi {
background-color: var(--odoo-purple) !important;
color: #ffffff !important;
font-weight: bold;
}


/* --- 3. Content Area & Card Styling --- */
.fiche,
.fichetab,
div.tabBar,
.box,
.box-flex-container {
border: 1px solid var(--odoo-medium-gray) !important;
border-radius: var(--odoo-border-radius) !important;
box-shadow: var(--odoo-box-shadow) !important;
background-color: #ffffff;
padding: 20px;
}

.box, .box-flex-container {
margin-bottom: 25px !important;
}

.box_titre,
.box-flex-title,
.table-border > tbody > tr > th {
background: none !important;
border-bottom: 2px solid var(--odoo-medium-gray) !important;
color: var(--odoo-purple) !important;
font-size: 1.2em;
font-weight: 600;
padding: 15px 0px !important;
text-align: left;
}

h1, .h1, h2, .h2 {
color: var(--odoo-purple);
font-weight: 600;
}


/* --- 4. Buttons & Inputs --- */
.button,
.buttonDelete,
input[type=submit],
input[type=button] {
background: var(--odoo-purple) !important;
color: #ffffff !important;
border: 1px solid var(--odoo-purple) !important;
border-radius: var(--odoo-border-radius) !important;
padding: 8px 16px !important;
font-weight: 500;
transition: background-color 0.2s ease, border-color 0.2s ease;
box-shadow: var(--odoo-box-shadow);
}

.button:hover,
input[type=submit]:hover,
input[type=button]:hover {
background: var(--odoo-purple-dark) !important;
border-color: var(--odoo-purple-dark) !important;
}

.button_secondary {
background: var(--odoo-medium-gray) !important;
color: var(--odoo-text-color) !important;
border: 1px solid #ced4da !important;
}

.button_secondary:hover {
background: #d3d9df !important;
border-color: #adb5bd !important;
}

input[type=text],
input[type=password],
textarea,
select {
border: 1px solid #ced4da !important;
border-radius: var(--odoo-border-radius) !important;
padding: 8px 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
border-color: var(--odoo-purple) !important;
box-shadow: 0 0 0 2px rgba(113, 75, 103, 0.25);
outline: none;
}


/* --- 5. Tables & Lists --- */
.liste_titre,
.table-border thead tr {
background: var(--odoo-light-gray) !important;
color: var(--odoo-dark-gray) !important;
font-weight: 600;
text-transform: uppercase;
font-size: 0.9em;
border-bottom: 2px solid var(--odoo-medium-gray);
}

.pair, .impair {
background: #ffffff !important;
border-bottom: 1px solid var(--odoo-medium-gray);
}

.pair:hover, .impair:hover {
background: #f1eef0 !important;
}


/* --- 6. Tabs & Other UI Elements --- */
div.tabs a.tab,
div.tabs a.tabactive {
border-radius: var(--odoo-border-radius) var(--odoo-border-radius) 0 0 !important;
border: 1px solid var(--odoo-medium-gray) !important;
background: var(--odoo-light-gray) !important;
padding: 10px 15px;
font-weight: 500;
}

div.tabs a.tabactive {
background: #ffffff !important;
border-bottom: 1px solid #ffffff !important;
color: var(--odoo-purple) !important;
font-weight: bold;
}

/* Login Page */
body.login {
background: var(--odoo-purple) !important;
}
#login_left {
padding: 40px;
background: #fff;
border-radius: var(--odoo-border-radius);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}