/**
 * Skin DigiFrika - surcouche du skin Elastic de Roundcube
 *
 * Ce fichier est resolu AVANT celui d'elastic par rcmail_output_html::get_skin_file(),
 * il doit donc importer elastic lui-meme puis appliquer les surcharges.
 * Les URLs imbriquees d'elastic (polices, icones) restent resolues par rapport
 * a son propre dossier : ne pas copier ces regles ici.
 */
@import url("../../elastic/styles/styles.min.css");

:root {
	--df-primary: #2563eb;
	--df-primary-dark: #1d4ed8;
	--df-primary-soft: #eff4ff;
	--df-primary-ring: rgba(37, 99, 235, .25);
	--df-surface: #ffffff;
	--df-canvas: #f4f6fb;
	--df-ink: #1e293b;
	--df-muted: #64748b;
	--df-border: #e2e8f0;
	--df-radius: 12px;
	--df-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
}

/* ---------------------------------------------------------------- Liens */

a,
.btn-link {
	color: var(--df-primary);
}

a:hover,
.btn-link:hover {
	color: var(--df-primary-dark);
}

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

.btn {
	border-radius: 8px;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
	background-color: var(--df-primary);
	border-color: var(--df-primary);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--df-primary-dark);
	border-color: var(--df-primary-dark);
}

.floating-action-buttons a.button,
#taskmenu .action-buttons a {
	background-color: var(--df-primary);
}

#taskmenu .action-buttons a:hover {
	background-color: var(--df-primary-dark);
}

/* -------------------------------------------------- Champs de saisie */

.form-control {
	border-radius: 8px;
	border-color: var(--df-border);
}

.form-control:focus,
.input-group-text input:focus,
.multi-input > .content.focused,
.recipient-input.focus {
	border-color: var(--df-primary);
	box-shadow: 0 0 0 3px var(--df-primary-ring);
}

/* ------------------------------------------- Navigation principale */

#layout-menu {
	background-color: var(--df-surface);
}

#taskmenu a {
	border-bottom: 0 !important;
	margin: 2px .4rem;
	border-radius: 8px;
	color: var(--df-muted);
	transition: background-color .15s ease, color .15s ease;
}

#taskmenu a:hover {
	background-color: var(--df-primary-soft);
	color: var(--df-primary-dark);
}

#taskmenu a.selected,
#taskmenu a.selected:hover {
	background-color: var(--df-primary);
	color: #fff;
}

#layout-menu .popover-header #logo {
	max-height: 34px;
	width: auto;
}

/* ---------------------------------------------- Colonnes et entetes */

#layout > div > .header {
	background-color: var(--df-surface);
	border-bottom: 1px solid var(--df-border);
	color: var(--df-ink);
}

#layout-sidebar,
#layout-list {
	border-right: 1px solid var(--df-border);
}

#layout-list,
#layout-content {
	background-color: var(--df-canvas);
}

/* ------------------------------------------------------- Listes */

.listing li.selected,
.listing tr.selected td {
	background-color: var(--df-primary-soft);
	color: var(--df-ink);
	box-shadow: inset 3px 0 0 var(--df-primary);
}

.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount {
	background-color: var(--df-primary);
	border-radius: 999px;
}

.quota-widget .value {
	background-color: var(--df-primary);
}

/* Liste des messages en cartes, facon maquette */
#messagelist.listing tbody tr {
	background-color: var(--df-surface);
	border: 1px solid var(--df-border);
	border-radius: var(--df-radius);
	box-shadow: var(--df-shadow);
}

#messagelist.listing tbody tr td {
	border-top: 0;
	border-bottom: 0;
}

#messagelist.listing tbody tr.unread td.subject span.subject {
	color: var(--df-ink);
}

/* -------------------------------------------------- Page de connexion */

body.task-login #layout-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: linear-gradient(160deg, #eef3ff 0%, var(--df-canvas) 55%, #e9eefb 100%);
}

body.task-login #logo {
	position: static;
	top: auto;
	max-height: 64px;
	width: auto;
	margin-bottom: .5rem;
}

/* Accroche entre le logo et la carte. #layout-content etant en flex
   colonne, on place le pseudo-element par 'order' : un ::before sur le
   formulaire tomberait a l'interieur de la carte.
   Texte en francais : la langue par defaut du service est fr_FR
   (voir config/10-digifrika.php). */
body.task-login #logo {
	order: 1;
}

body.task-login #layout-content::after {
	content: "Votre messagerie";
	order: 2;
	margin-bottom: 1.5rem;
	color: var(--df-muted);
	font-size: .95rem;
}

body.task-login #login-form {
	order: 3;
}

body.task-login #login-form {
	position: static;
	top: auto;
	width: 100%;
	max-width: 390px;
	padding: 2.25rem 2rem;
	background: var(--df-surface);
	border: 1px solid var(--df-border);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
	text-align: left;
}

body.task-login #login-form .input-group {
	margin-bottom: .9rem;
	border-radius: 8px;
}

/* Le groupe porte l'anneau de focus, pas chaque champ : l'icone et le
   champ forment un seul bloc arrondi. */
body.task-login #login-form .input-group:focus-within {
	box-shadow: 0 0 0 3px var(--df-primary-ring);
}

body.task-login #login-form .input-group:focus-within .input-group-text,
body.task-login #login-form .input-group:focus-within .form-control {
	border-color: var(--df-primary);
}

body.task-login #login-form .input-group-text {
	background-color: var(--df-surface);
	border: 1px solid var(--df-border);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	color: var(--df-muted);
	padding-left: .9rem;
}

body.task-login #login-form .form-control {
	padding: .65rem .85rem;
	height: auto;
	border-left: 0;
	border-radius: 0 8px 8px 0;
}

body.task-login #login-form .form-control:focus {
	box-shadow: none;
}

body.task-login #rcmloginsubmit {
	width: 100%;
	padding: .7rem;
	font-weight: 600;
	letter-spacing: .01em;
}

body.task-login #login-footer {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--df-border);
	color: var(--df-muted);
	font-size: .8rem;
	text-align: center;
}

/* ------------------------------------------------------ Mode sombre */

html.dark-mode {
	--df-surface: #1f282c;
	--df-canvas: #232d31;
	--df-ink: #e8eef9;
	--df-muted: #9aa8b4;
	--df-border: #374549;
	--df-primary-soft: #2a3a4d;
}

html.dark-mode #taskmenu a.selected,
html.dark-mode .menu.toolbar a.selected {
	background-color: var(--df-primary);
	color: #fff;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
	background-color: var(--df-primary-soft);
	color: #fff;
}

html.dark-mode a,
html.dark-mode .btn-link {
	color: #7aa7fb;
}

/* DigiFrika — modernisation de l'interface Roundcube */
:root {
  --df-primary: #2563eb;
  --df-primary-dark: #1d4ed8;
  --df-primary-soft: #eff6ff;
  --df-surface: #ffffff;
  --df-canvas: #f5f7fb;
  --df-ink: #172033;
  --df-muted: #64748b;
  --df-border: #e5eaf2;
}

/* Fond et séparateurs */
body {
  background: var(--df-canvas);
  color: var(--df-ink);
}

#layout {
  background: var(--df-surface);
}

#layout-sidebar,
#layout-list,
#layout-content {
  background: var(--df-surface);
  border-color: var(--df-border);
}

/* En-têtes des panneaux */
#layout > div > .header {
  background: var(--df-surface);
  color: var(--df-ink);
  border-bottom: 1px solid var(--df-border);
}

/* Menu des applications : bleu DigiFrika */
@media screen and (min-width: 481px) {
  #layout-menu,
  #taskmenu,
  #taskmenu .special-buttons {
    background: var(--df-primary-dark);
  }

  #taskmenu a {
    color: #fff;
  }

  #taskmenu a:hover,
  #taskmenu a.selected,
  #taskmenu a.selected:hover {
    color: #fff;
    background: var(--df-primary);
  }
}

/* Liens, boutons et actions principales */
a {
  color: var(--df-primary);
}

.btn-primary,
button.btn-primary {
  color: #fff;
  background: var(--df-primary);
  border-color: var(--df-primary);
}

.btn-primary:hover,
button.btn-primary:hover {
  background: var(--df-primary-dark);
  border-color: var(--df-primary-dark);
}

/* Champs de recherche et formulaires */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: var(--df-border);
  border-radius: 8px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--df-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Dossiers et messages sélectionnés */
.folderlist li.selected,
.listing li.selected,
.listing tr.selected td {
  background: var(--df-primary-soft);
}

/* Liste de messages plus nette */
.messagelist tr td {
  border-bottom-color: var(--df-border);
}

.messagelist tr:hover td {
  background: #f8faff;
}

/* Petits détails visuels */
#layout-sidebar,
#layout-list {
  box-shadow: none;
}

#layout-content {
  min-width: 0;
}

::selection {
  color: #fff;
  background: var(--df-primary);
}

/* Mobile : conserver le comportement responsive natif */
@media screen and (max-width: 768px) {
  #layout-sidebar,
  #layout-list,
  #layout-content {
    min-width: 0;
  }
}

/* DigiFrika — modernisation de l'interface Roundcube */
:root {
  --df-primary: #2563eb;
  --df-primary-dark: #1d4ed8;
  --df-primary-soft: #eff6ff;
  --df-surface: #ffffff;
  --df-canvas: #f5f7fb;
  --df-ink: #172033;
  --df-muted: #64748b;
  --df-border: #e5eaf2;
}

/* Fond et séparateurs */
body {
  background: var(--df-canvas);
  color: var(--df-ink);
}

#layout {
  background: var(--df-surface);
}

#layout-sidebar,
#layout-list,
#layout-content {
  background: var(--df-surface);
  border-color: var(--df-border);
}

/* En-têtes des panneaux */
#layout > div > .header {
  background: var(--df-surface);
  color: var(--df-ink);
  border-bottom: 1px solid var(--df-border);
}

/* Menu des applications : bleu DigiFrika */
@media screen and (min-width: 481px) {
  #layout-menu,
  #taskmenu,
  #taskmenu .special-buttons {
    background: var(--df-primary-dark);
  }

  #taskmenu a {
    color: #fff;
  }

  #taskmenu a:hover,
  #taskmenu a.selected,
  #taskmenu a.selected:hover {
    color: #fff;
    background: var(--df-primary);
  }
}

/* Liens, boutons et actions principales */
a {
  color: var(--df-primary);
}

.btn-primary,
button.btn-primary {
  color: #fff;
  background: var(--df-primary);
  border-color: var(--df-primary);
}

.btn-primary:hover,
button.btn-primary:hover {
  background: var(--df-primary-dark);
  border-color: var(--df-primary-dark);
}

/* Champs de recherche et formulaires */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: var(--df-border);
  border-radius: 8px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--df-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Dossiers et messages sélectionnés */
.folderlist li.selected,
.listing li.selected,
.listing tr.selected td {
  background: var(--df-primary-soft);
}

/* Liste de messages plus nette */
.messagelist tr td {
  border-bottom-color: var(--df-border);
}

.messagelist tr:hover td {
  background: #f8faff;
}

/* Petits détails visuels */
#layout-sidebar,
#layout-list {
  box-shadow: none;
}

#layout-content {
  min-width: 0;
}

::selection {
  color: #fff;
  background: var(--df-primary);
}

/* Mobile : conserver le comportement responsive natif */
@media screen and (max-width: 768px) {
  #layout-sidebar,
  #layout-list,
  #layout-content {
    min-width: 0;
  }
}

/* DigiFrika : finition visuelle de la messagerie */
#layout-sidebar, #layout-list, #layout-content {
  border-color: #e2e8f0;
}

#layout-sidebar > .header, #layout-list > .header, #layout-content > .header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  color: #172033;
}

#layout-sidebar .header-title, #layout-list .header-title {
  color: #172033;
}

#layout-sidebar .folderlist li.selected > a,
#layout-sidebar .folderlist li.selected {
  background-color: #eff6ff;
  color: #1d4ed8;
}

.messagelist tr.selected td {
  background-color: #eff6ff;
}

.messagelist tr.selected td:first-child {
  border-left-color: #2563eb;
}

#layout-content .header a.button:hover,
#layout-list .header a.button:hover,
#layout-sidebar .header a.button:hover {
  color: #1d4ed8;
  background-color: #eff6ff;
}

#layout-content .iframe-wrapper {
  background: #ffffff;
}

@media screen and (min-width: 769px) {
  #layout-sidebar { flex: 2; max-width: 24%; }
  #layout-list { flex: 3; max-width: 32%; }
  #layout-content { flex: 5; min-width: 0; }
}