/*
 * ConceptERP visual refresh — additive, non-destructive stylesheet.
 * Loaded LAST (after core styles.css, mobile.css, all vendor CSS) so it can
 * safely restyle existing Bootstrap 4 / SoPlanning selectors without any
 * template change. Inspired by https://concept-erp.com design tokens.
 *
 * Do not merge this into styles.css or the theme files: keeping it separate
 * is what makes SoPlanning upstream updates (~2x/year) a one-line reapply
 * instead of a manual re-merge.
 */

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/instrument-sans/instrument-sans-latin-variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
	--erp-bg: #fafaf9;
	--erp-surface: #ffffff;
	--erp-fg: #00596e;
	--erp-primary: #00596e;
	--erp-primary-hover: #00475a;
	--erp-primary-foreground: #fafaf9;
	--erp-secondary: #f3f2ee;
	--erp-muted: #ecebe7;
	--erp-muted-fg: #3d7b8e;
	--erp-accent: #e7e4dd;
	--erp-destructive: #e40014;
	--erp-brand: #f86111;
	--erp-brand-foreground: #fdfcf8;
	--erp-border: #dad7d0;
	--erp-radius: .25rem;
	--erp-font: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Typography & base ---------- */
body {
	font-family: var(--erp-font);
	background-color: var(--erp-bg);
	color: #33444a;
}
h1, h2, h3, h4, h5, h6,
.titrePage, .soplanning_index_title1, .soplanning_index_title2, .soplanning_install_title {
	font-family: var(--erp-font);
	color: var(--erp-fg);
	font-weight: 600;
}
a { color: var(--erp-primary); }
a:hover { color: var(--erp-brand); }

/* ---------- Navbar ---------- */
nav.navbar.navbar-dark.bg-dark {
	background-color: var(--erp-primary) !important;
	border-bottom: 1px solid var(--erp-primary-hover);
	transition: box-shadow .2s ease;
}
nav.navbar.navbar-dark.bg-dark.cerp-scrolled {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
	color: #ffe9d6 !important;
}
#soplanning_title { font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
	font-family: var(--erp-font);
	border-radius: var(--erp-radius);
	font-weight: 500;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-primary {
	background: var(--erp-primary);
	border-color: var(--erp-primary);
	background-image: none;
}
.btn-primary:hover, .btn-primary:focus {
	background: var(--erp-primary-hover);
	border-color: var(--erp-primary-hover);
	background-image: none;
}
.btn-info {
	background: var(--erp-muted-fg);
	border-color: var(--erp-muted-fg);
	background-image: none;
	color: #fff;
}
.btn-info:hover {
	background: var(--erp-brand);
	border-color: var(--erp-brand);
	background-image: none;
}
.btn-success { background-color: #009767; border-color: #009767; background-image: none; }
.btn-success:hover { background-color: #00794f; border-color: #00794f; }
.btn-danger { background-color: var(--erp-destructive); border-color: var(--erp-destructive); background-image: none; }
.btn-warning { background-color: var(--erp-brand); border-color: var(--erp-brand); background-image: none; color: #fff; }
.btn-default, .btn-secondary {
	background-image: none;
	background-color: var(--erp-secondary);
	border-color: var(--erp-border);
	color: var(--erp-fg);
}
/* "Filtre utilisateurs" toolbar button (jquery.multiselect on #filtreUser):
   the plugin adds .btn-danger to its generated button when a filter is
   active (jquery.multiselect.js ~L886) — recolor that state to the brand
   orange instead of red. Targeted via the stable #filtreUser id (the plugin
   inserts its UI as the next sibling), not the generated ms-list-N id, which
   is unstable across page loads. */
#filtreUser + .ms-options-wrap button.btn-danger {
	background-color: var(--erp-brand) !important;
	border-color: var(--erp-brand) !important;
}
.btn-default:hover, .btn-secondary:hover {
	background-color: var(--erp-accent);
	border-color: var(--erp-border);
}
.btn:focus, .btn.focus, .btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 89, 110, .25);
}

/* ---------- Boxes / panels / modals ---------- */
.soplanning-box {
	background-color: var(--erp-surface);
	border: 1px solid var(--erp-border);
	border-radius: var(--erp-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.modal-content {
	border-radius: calc(var(--erp-radius) + 2px);
	border: 1px solid var(--erp-border);
}
.modal-header {
	background-color: var(--erp-secondary);
	border-bottom: 1px solid var(--erp-border);
	border-top-left-radius: calc(var(--erp-radius) + 2px);
	border-top-right-radius: calc(var(--erp-radius) + 2px);
}
.modal-header .modal-title { color: var(--erp-fg); font-weight: 600; }

/* ---------- Forms ---------- */
.form-control, .select2-container--bootstrap4 .select2-selection,
.ms-options, .datepicker-dropdown {
	border-radius: var(--erp-radius);
	border-color: var(--erp-border);
}
.form-control:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
	border-color: var(--erp-primary);
	box-shadow: 0 0 0 3px rgba(0, 89, 110, .15);
}
label { color: var(--erp-fg); }

/* ---------- Alerts ---------- */
.alert-success {
	color: #00593c;
	background-color: #e3f6ee;
	border-color: #b7e6d1;
}
.alert-danger, .alert-error {
	color: #7a000d;
	background-color: #fdeaec;
	border-color: #f6b9c0;
}

/* ---------- Dropdown menus & tooltips ---------- */
.dropdown-menu {
	border-color: var(--erp-border);
	border-radius: var(--erp-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.dropdown-item:hover, .dropdown-item:focus {
	background-color: var(--erp-secondary) !important;
	color: var(--erp-fg) !important;
	background-image: none !important;
}
.divTooltip, .tooltipster-box {
	border-radius: var(--erp-radius);
}

/* Task/holiday hover tooltips: plain Bootstrap 4 .tooltip, populated with server-
   rendered HTML (title attribute, see includes/lib.inc create_tooltip() and
   www_footer.tpl's `.tooltipster`.tooltip({html:true})). Restyled as a clean
   floating card instead of the default black bubble — no JS/PHP change needed. */
.tooltip.show { opacity: 1 !important; }
.tooltip .tooltip-inner {
	max-width: 320px;
	padding: .65rem .85rem;
	background-color: var(--erp-surface);
	color: #33444a;
	border: 1px solid var(--erp-border);
	border-radius: calc(var(--erp-radius) + 2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
	text-align: left;
	font-size: .82rem;
	line-height: 1.55;
}
.tooltip .tooltip-inner strong { color: var(--erp-fg); }
.tooltip .tooltip-inner hr { margin: .45rem 0; border-color: var(--erp-border); }
.tooltip .arrow::before { border-width: .4rem; }
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
	border-top-color: var(--erp-surface) !important;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
	border-right-color: var(--erp-surface) !important;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
	border-bottom-color: var(--erp-surface) !important;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
	border-left-color: var(--erp-surface) !important;
}

/* ---------- Tables ---------- */
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--erp-secondary); }
.table-hover > tbody > tr:hover { background-color: var(--erp-accent); }
.table thead th { color: var(--erp-fg); border-bottom-color: var(--erp-border); }

/* ---------- Planning grid ---------- */
/* Row/time header cells (hour column, team dividers, switch corner) stay
   on-brand teal. This intentionally excludes .planningFirstCol, which carries
   each user/project/lieu/ressource's own color (see below). */
.planningFirstRowCol, .planningFirstColMin, .planningFirstColHour,
.planning_team_div, .planning_team_div_hour, #divPeople th {
	background-color: var(--erp-primary) !important;
	color: #fff !important;
}

/* Calendar header band (month/week/day/hour labels): a solid teal band here
   read as too heavy — use a light neutral instead, with a stronger left
   border + alternating tint on each .planning_head_month cell (one <th> per
   month, colspan-based) so month boundaries stay easy to scan. The same
   border is added to the matching first-of-month cell on the day-name and
   day-number rows below by cerp-refresh.js (those rows have one plain <th>
   per day, no month info to key off in CSS alone — it flags the cell whose
   day number reads "1"). */
.planning_head_month, .planning_head_week, .planning_head_day, .planning_head_dayname, .planning_head_hour {
	background-color: var(--erp-secondary) !important;
	color: var(--erp-fg) !important;
}
.planning_head_month,
.planning_head_dayname.cerp-month-start, .planning_head_day.cerp-month-start {
	border-left: 2px solid var(--erp-primary) !important;
}
.planning_head_month:nth-of-type(even),
.planning_head_week:nth-of-type(even) {
	background-color: var(--erp-muted) !important;
}

/* "Affichage" dropdown (fonctions.js/www_planning.tpl move #dropdownDisplayPlanning
   into #tdUser_0, the corner header cell) — match the light day-header color
   instead of the teal used by other row/time header cells. */
#tdUser_0 {
	background-color: var(--erp-secondary) !important;
}
#tdUser_0 .boutonAffichagePlanning {
	color: var(--erp-fg) !important;
}

/* Name column (user/project/lieu/ressource): www/planning.php sets each cell's
   own color inline (style="background-color:#XXXXXX") from that item's "couleur"
   field. Rather than tinting the whole row, keep the cell white and render that
   color as a small swatch — inserted by cerp-refresh.js, which reads the same
   inline style before this rule visually overrides it. */
.planningFirstCol {
	background-color: var(--erp-surface) !important;
	color: var(--erp-fg) !important;
	padding-left: 10px !important;
}
.planningFirstCol a, .planningFirstCol span {
	color: var(--erp-fg) !important;
}
.cerp-color-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	margin-left: 4px;
	margin-right: 8px;
	vertical-align: middle;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
/* The corner "switch" header cell also carries .planningFirstCol — keep it teal
   like the other header cells (higher specificity than .planningFirstCol alone). */
th.planning_switch.planningFirstCol {
	background-color: var(--erp-primary) !important;
	color: #fff !important;
}

.planning_head_month a, .planning_head_week a, .planning_head_day a, .planning_head_dayname a {
	color: var(--erp-fg);
}
.planning_head_month a:hover, .planning_head_week a:hover, .planning_head_day a:hover, .planning_head_dayname a:hover {
	background-color: var(--erp-primary);
	color: #fff;
}
.planningContent td.weekend, .planningContent td.feries, .feries {
	background-color: var(--erp-muted) !important;
}
#tabContenuPlanning tbody tr:nth-child(even) > td.week { background-color: var(--erp-secondary) !important; }
#tabContenuPlanning tbody tr:nth-child(odd) > td.week { background-color: var(--erp-surface) !important; }
/* Keep the name column's stripe in sync with its own row (higher specificity
   than the plain .planningFirstCol rule above, so this wins). */
#tabContenuPlanning tbody tr:nth-child(even) > th.planningFirstCol { background-color: var(--erp-secondary) !important; }
#tabContenuPlanning tbody tr:nth-child(odd) > th.planningFirstCol { background-color: var(--erp-surface) !important; }
.planningContent th.today, .planningContent td.today,
#tabContenuPlanning tbody tr > td.today {
	background-color: var(--erp-brand) !important;
	color: #fff !important;
}
/* Encadré orange autour de toute la colonne du jour courant */
.planningContent th.today, .planningContent td.today,
#tabContenuPlanning tbody tr > td.today {
	border-left: 3px solid var(--erp-brand) !important;
	border-right: 3px solid var(--erp-brand) !important;
}
#planning_header_dayname th.today {
	border-top: 3px solid var(--erp-brand) !important;
}
#tabContenuPlanning tbody tr:last-child > td.today {
	border-bottom: 3px solid var(--erp-brand) !important;
}
/* Encadré gris léger autour de la colonne du jour survolé (cerp-hover-col
   classes are toggled by cerp-refresh.js, mirroring the .today column frame).
   Drawn with an inset box-shadow rather than a border: a border adds to the
   cell's rendered width, which nudges the auto table layout and makes every
   column to the right visibly shift on hover. box-shadow paints inside the
   existing box, so column widths never change. */
.planningContent th.cerp-hover-col, .planningContent td.cerp-hover-col,
#tabContenuPlanning tbody tr > td.cerp-hover-col {
	box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, .25), inset -2px 0 0 0 rgba(0, 0, 0, .25) !important;
}
#planning_header_dayname th.cerp-hover-col {
	box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, .25), inset -2px 0 0 0 rgba(0, 0, 0, .25), inset 0 2px 0 0 rgba(0, 0, 0, .25) !important;
}
#tabContenuPlanning tbody tr:last-child > td.cerp-hover-col {
	box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, .25), inset -2px 0 0 0 rgba(0, 0, 0, .25), inset 0 -2px 0 0 rgba(0, 0, 0, .25) !important;
}
/* Encadré gris léger (les 4 côtés) autour du nom d'utilisateur de la ligne survolée */
#tabContenuPlanning tbody tr > th.planningFirstCol.cerp-hover-col {
	box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, .25), inset -2px 0 0 0 rgba(0, 0, 0, .25), inset 0 2px 0 0 rgba(0, 0, 0, .25), inset 0 -2px 0 0 rgba(0, 0, 0, .25) !important;
}
.cellProject, .cellProjectBiseau1, .cellProjectBiseau2, .cellHolidays {
	border-radius: var(--erp-radius);
}

/* ---------- Misc widgets ---------- */
.progress { border-radius: var(--erp-radius); }
.progress-bar { background-color: var(--erp-primary); }
.pastille-statut, .pastille-projet, .pastille-user { box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }

/* ---------- Scrollbar (progressive enhancement, WebKit only) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--erp-secondary); }
::-webkit-scrollbar-thumb { background: var(--erp-muted-fg); border-radius: var(--erp-radius); }
::-webkit-scrollbar-thumb:hover { background: var(--erp-primary); }