/**
 * Juniari Webmail - Personnalisation du skin Elastic
 * Couleurs et styles personnalisés
 */

/* -----------------------------------------------------------------------
   Couleurs principales (palette Juniari)
   ----------------------------------------------------------------------- */
:root {
    --color-main: #1a73e8;        /* Bleu principal */
    --color-main-dark: #1557b0;   /* Bleu foncé (hover) */
    --color-accent: #ff6d00;      /* Orange accent */
    --color-bg: #f5f7fa;          /* Fond général */
    --color-sidebar: #1e2b3c;     /* Sidebar sombre */
    --color-sidebar-text: #cdd5e0;
    --color-sidebar-active: #1a73e8;
}

/* -----------------------------------------------------------------------
   Barre latérale (sidebar)
   ----------------------------------------------------------------------- */
#layout > .sidebar {
    background-color: var(--color-sidebar) !important;
}

#layout > .sidebar .listitem a,
#layout > .sidebar .listitem span,
#layout > .sidebar .folder-name {
    color: var(--color-sidebar-text) !important;
}

#layout > .sidebar .listitem.selected > a,
#layout > .sidebar .listitem:hover > a {
    background-color: rgba(26, 115, 232, 0.2) !important;
    color: #fff !important;
}

/* Compteur de non-lus */
#layout > .sidebar .unreadcount {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}

/* -----------------------------------------------------------------------
   Barre de navigation supérieure
   ----------------------------------------------------------------------- */
#header {
    background-color: var(--color-main) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

#header .header-title,
#header a,
#header button {
    color: #fff !important;
}

/* Logo / nom du service */
#header .header-title:before {
    content: '✉ Juniari Mail';
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 0.5px;
}

/* -----------------------------------------------------------------------
   Bouton Nouveau message
   ----------------------------------------------------------------------- */
a.compose,
button.compose {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 24px !important;
    padding: 8px 20px !important;
}

a.compose:hover,
button.compose:hover {
    background-color: #e65100 !important;
}

/* -----------------------------------------------------------------------
   Page de login
   ----------------------------------------------------------------------- */
#login-form .formbox {
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    padding: 40px !important;
}

#login-form .submit {
    background-color: var(--color-main) !important;
    border-color: var(--color-main) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    width: 100% !important;
    padding: 12px !important;
    font-size: 1em !important;
}

#login-form .submit:hover {
    background-color: var(--color-main-dark) !important;
}

.watermark {
    background-color: var(--color-main) !important;
}

/* -----------------------------------------------------------------------
   Fond général
   ----------------------------------------------------------------------- */
body {
    background-color: var(--color-bg) !important;
}

/* -----------------------------------------------------------------------
   Boutons principaux
   ----------------------------------------------------------------------- */
.btn-primary,
button.primary {
    background-color: var(--color-main) !important;
    border-color: var(--color-main) !important;
    border-radius: 6px !important;
}

.btn-primary:hover {
    background-color: var(--color-main-dark) !important;
}

/* -----------------------------------------------------------------------
   Toolbar (actions sur les mails)
   ----------------------------------------------------------------------- */
#toolbar {
    background-color: #fff !important;
    border-bottom: 1px solid #e0e0e0 !important;
}