/*
 * Thème Magellan pour MantisBT (charte graphique Magellan 2026), dans l'esprit des applis internes
 * (MagForce) : barre marine unie, menu latéral blanc, blocs en cartes blanches à en-tête cobalt,
 * libellés sur fond gris-bleu.
 * Surcharge le skin ACE "skin-3" utilisé par Mantis : préfixe body.skin-3 / body.login-layout
 * pour l'emporter sur ace-skins.css sans !important quand c'est possible.
 *
 * Polices : Josefin Sans (titres) et Inter (texte), SIL Open Font License, hébergées dans le plugin.
 */

@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(plugin_file.php?file=MagellanTheme/josefin-sans-latin.woff2) format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(plugin_file.php?file=MagellanTheme/inter-latin.woff2) format('woff2');
}

:root {
	/* Palette principale */
	--mg-marine: #000082;
	--mg-cobalt: #2543b9;
	--mg-azur: #4a85f6;
	--mg-grenat: #ad1a48;
	/* Neutres */
	--mg-fond: #f5f6f8;
	--mg-bordure: #dfe3ec;
	--mg-filet: #edf0f5;
	--mg-libelle: #f1f3f9;
	--mg-survol: #eef2ff;
	--mg-zebre: #fafbfd;
	--mg-texte: #1b1d36;
	--mg-texte-doux: #5b6078;
	--mg-titres: 'Josefin Sans', 'Inter', system-ui, sans-serif;
	--mg-texte-police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Typographie ---------- */

body.skin-3,
body.login-layout,
body.skin-3 .tooltip,
body.skin-3 .popover,
body.skin-3 .form-control,
body.skin-3 .btn {
	font-family: var(--mg-texte-police);
}
body.skin-3 {
	color: var(--mg-texte);
	background-color: var(--mg-fond);
}
body.skin-3 h1, body.skin-3 h2, body.skin-3 h3, body.skin-3 h4, body.skin-3 h5,
body.skin-3 .navbar-brand,
body.login-layout h1, body.login-layout h4 {
	font-family: var(--mg-titres);
	font-weight: 700;
}
body.skin-3 a {
	color: var(--mg-cobalt);
}
body.skin-3 a:hover,
body.skin-3 a:focus {
	color: var(--mg-marine);
}

/* ---------- Barre du haut : marine uni ---------- */

body.skin-3 .navbar,
body.skin-3 .navbar.navbar-collapse,
body.skin-3 .navbar.navbar-collapse .navbar-container {
	background: var(--mg-marine);
	border: none;
	box-shadow: none;
}
body.skin-3 .navbar .navbar-brand,
body.skin-3 .navbar .navbar-brand small,
body.skin-3 .ace-nav > li > a,
body.skin-3 .ace-nav > li > a > .ace-icon {
	color: #fff;
}
body.skin-3 .navbar .navbar-brand {
	font-size: 18px;
}
body.skin-3 .ace-nav > li,
body.skin-3 .ace-nav > li > a,
body.skin-3 .ace-nav > li.open > a {
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, .15);
}
body.skin-3 .ace-nav > li > a:hover,
body.skin-3 .ace-nav > li > a:focus,
body.skin-3 .ace-nav > li.open > a {
	background-color: rgba(255, 255, 255, .1) !important;
}
/* Boutons de la barre ("Rapporter une anomalie"...) : contour blanc */
body.skin-3 .navbar .btn,
body.skin-3 .navbar .btn:focus {
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, .5) !important;
	color: #fff !important;
	border-radius: 4px;
}
body.skin-3 .navbar .btn:hover {
	background-color: rgba(255, 255, 255, .12) !important;
}
body.skin-3 .navbar .navbar-toggle,
body.skin-3 .navbar .navbar-toggle:hover,
body.skin-3 .navbar .navbar-toggle:focus,
body.skin-3 .navbar .navbar-toggle[data-toggle=collapse]:not(.collapsed) {
	background-color: var(--mg-cobalt);
}

/* ---------- Menu latéral : blanc, actif sur fond bleu clair + trait cobalt ---------- */

body.skin-3 .sidebar,
body.skin-3 .sidebar.responsive,
body.skin-3 .sidebar.navbar-collapse,
body.skin-3 .main-container:before {
	background-color: #fff;
	border-color: var(--mg-bordure);
}
body.skin-3 .nav-list > li,
body.skin-3 .nav-list > li:hover + li,
body.skin-3 .nav-list > li.active + li,
body.skin-3 .nav-list > li.open + li {
	border-color: var(--mg-filet);
}
body.skin-3 .nav-list > li > a,
body.skin-3 .nav-list > li > a:focus {
	background-color: #fff;
	color: var(--mg-texte-doux);
}
body.skin-3 .nav-list > li > a > .menu-icon {
	color: var(--mg-marine);
}
body.skin-3 .nav-list > li:hover > a,
body.skin-3 .nav-list > li > a:hover,
body.skin-3 .nav-list > li.active > a,
body.skin-3 .nav-list > li.active > a:hover {
	background-color: var(--mg-survol);
	color: var(--mg-marine);
}
body.skin-3 .nav-list > li.active > a {
	font-weight: 600;
}
body.skin-3 .nav-list > li.active:before,
body.skin-3 .nav-list > li:hover:before {
	background-color: var(--mg-cobalt);
}
body.skin-3 .nav-list li.active > a:after {
	border-right-color: var(--mg-fond);
}
body.skin-3 .sidebar-toggle {
	background-color: #fff;
	border-color: var(--mg-filet);
}
body.skin-3 .sidebar-toggle > .ace-icon {
	color: var(--mg-texte-doux);
	background-color: #fff;
	border-color: var(--mg-bordure);
}

/* ---------- Fil d'Ariane, contenu ---------- */

body.skin-3 .main-content,
body.skin-3 .page-content {
	background-color: var(--mg-fond);
}
body.skin-3 .breadcrumbs {
	background-color: #fff;
	border-bottom: 1px solid var(--mg-bordure);
}
body.skin-3 .breadcrumbs .label,
body.skin-3 .breadcrumbs .badge {
	background-color: var(--mg-survol);
	color: var(--mg-cobalt);
	font-weight: 600;
}

/* ---------- Blocs : cartes blanches, en-tête cobalt uni ---------- */

body.skin-3 .widget-box,
body.skin-3 .widget-color-blue,
body.skin-3 .widget-color-blue2,
body.skin-3 .widget-color-blue3 {
	border: 1px solid var(--mg-bordure);
	border-radius: 6px;
	box-shadow: none;
	background: #fff;
	overflow: hidden;
}
body.skin-3 .widget-header,
body.skin-3 .widget-color-blue > .widget-header,
body.skin-3 .widget-color-blue2 > .widget-header,
body.skin-3 .widget-color-blue3 > .widget-header {
	background: var(--mg-cobalt);
	border-color: var(--mg-cobalt);
	color: #fff;
	min-height: 42px;
}
body.skin-3 .widget-header > .widget-title,
body.skin-3 .widget-header .widget-title a,
body.skin-3 .widget-header .widget-title .ace-icon {
	font-family: var(--mg-titres);
	font-size: 16px;
	font-weight: 700;
	line-height: 42px;
	color: #fff;
}
body.skin-3 .widget-header .widget-title a:hover {
	color: #fff;
	text-decoration: underline;
}
body.skin-3 .widget-header .badge {
	background-color: rgba(255, 255, 255, .18);
	color: #fff;
	font-family: var(--mg-texte-police);
	font-size: 12px;
	font-weight: 600;
}
body.skin-3 .widget-toolbar:before {
	border-color: rgba(255, 255, 255, .25);
}
body.skin-3 .widget-toolbar > a,
body.skin-3 .widget-toolbar > a > .ace-icon,
body.skin-3 .widget-toolbar .ace-icon {
	color: #fff;
}
/* Boutons dans l'en-tête ("Afficher les anomalies") : contour blanc */
body.skin-3 .widget-header .btn,
body.skin-3 .widget-header .btn:focus {
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
	color: #fff !important;
	border-radius: 4px;
}
body.skin-3 .widget-header .btn:hover {
	background-color: rgba(255, 255, 255, .12) !important;
}
body.skin-3 .widget-toolbox {
	background-color: var(--mg-zebre);
	border-color: var(--mg-filet);
}

/* ---------- Tableaux ---------- */

body.skin-3 .table > thead > tr > th,
body.skin-3 .table > thead > tr > td {
	background: var(--mg-libelle);
	border-color: var(--mg-bordure);
	color: var(--mg-marine);
	font-weight: 600;
}
body.skin-3 .table > thead > tr > th a {
	color: var(--mg-marine);
}
body.skin-3 .table > tbody > tr > td,
body.skin-3 .table > tbody > tr > th {
	border-color: var(--mg-filet);
}
body.skin-3 .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--mg-zebre);
}
body.skin-3 .table-hover > tbody > tr:hover {
	background-color: var(--mg-survol);
}
/* Cellules de libellé (Rapporteur, État, Priorité...) */
body.skin-3 td.category,
body.skin-3 th.category,
body.skin-3 .table > tbody > tr > td.category,
body.skin-3 .table > tbody > tr > th.category {
	background-color: var(--mg-libelle);
	color: var(--mg-marine);
	font-weight: 600;
}

/* ---------- Boutons ---------- */

body.skin-3 .btn-primary,
body.skin-3 .btn-primary:focus,
body.login-layout .btn-success,
body.login-layout .btn-success:focus {
	background-color: var(--mg-marine) !important;
	border-color: var(--mg-marine);
	color: #fff !important;
}
body.skin-3 .btn-primary:hover,
body.skin-3 .btn-primary:active,
body.login-layout .btn-success:hover,
body.login-layout .btn-success:active {
	background-color: var(--mg-cobalt) !important;
	border-color: var(--mg-cobalt);
}
body.skin-3 .btn-white,
body.skin-3 .btn-white.btn-primary,
body.skin-3 .btn-white.btn-primary:focus {
	background-color: #fff !important;
	border-color: var(--mg-bordure);
	color: var(--mg-marine) !important;
}
body.skin-3 .btn-white:hover,
body.skin-3 .btn-white.btn-primary:hover,
body.skin-3 .btn-white.btn-primary:active {
	background-color: var(--mg-survol) !important;
	border-color: var(--mg-cobalt);
	color: var(--mg-marine) !important;
}
body.skin-3 .btn-white.btn-danger {
	color: var(--mg-grenat) !important;
}
body.skin-3 .btn-round {
	border-radius: 4px !important;
}

/* ---------- Onglets, pagination, étiquettes, formulaires ---------- */

body.skin-3 .nav-tabs {
	border-color: var(--mg-bordure);
}
body.skin-3 .nav-tabs > li > a {
	color: var(--mg-texte-doux);
}
body.skin-3 .nav-tabs > li.active > a,
body.skin-3 .nav-tabs > li.active > a:hover,
body.skin-3 .nav-tabs > li.active > a:focus {
	border-top-color: var(--mg-cobalt);
	color: var(--mg-marine);
	font-weight: 600;
}
body.skin-3 .pagination > .active > a,
body.skin-3 .pagination > .active > a:hover,
body.skin-3 .pagination > .active > span {
	background-color: var(--mg-marine);
	border-color: var(--mg-marine);
}
body.skin-3 .label-primary,
body.skin-3 .badge-primary {
	background-color: var(--mg-cobalt);
}
body.skin-3 .form-control,
body.skin-3 input[type=text],
body.skin-3 input[type=password],
body.skin-3 input[type=email],
body.skin-3 select,
body.skin-3 textarea {
	border-color: var(--mg-bordure);
	border-radius: 4px;
}
body.skin-3 .form-control:focus,
body.skin-3 input[type=text]:focus,
body.skin-3 input[type=password]:focus,
body.skin-3 input[type=email]:focus,
body.skin-3 select:focus,
body.skin-3 textarea:focus,
body.login-layout input:focus {
	border-color: var(--mg-azur);
	box-shadow: 0 0 0 2px rgba(74, 133, 246, .2);
}

/* ---------- Pied de page ---------- */

body.skin-3 .footer .footer-inner .footer-content {
	border-top-color: var(--mg-bordure);
	color: var(--mg-texte-doux);
}

/* ---------- Page de connexion : fond gris clair, carte à en-tête cobalt ---------- */

body.login-layout,
body.login-layout.light-login {
	background: var(--mg-fond);
	color: var(--mg-texte);
}
body.login-layout .login-container {
	margin-top: 6vh;
}
body.login-layout .widget-box,
body.login-layout .widget-box.no-border {
	border: 1px solid var(--mg-bordure);
	border-top: 4px solid var(--mg-cobalt);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 56, .06);
}
body.login-layout .widget-box .widget-main {
	background: #fff;
	padding: 24px;
}
body.login-layout .widget-main .header {
	color: var(--mg-marine);
	border-bottom-color: var(--mg-filet);
}
body.login-layout .widget-main .header .ace-icon {
	color: var(--mg-cobalt);
}
body.login-layout a {
	color: var(--mg-cobalt);
}
body.login-layout .toolbar {
	background: #fff;
	border-top: 1px solid var(--mg-filet);
}
body.login-layout .toolbar > div > a {
	color: var(--mg-cobalt);
}
body.login-layout .login-logo img {
	width: 320px;
	max-width: 100%;
	height: auto;
}