/* =============================================================
   Wipsee Connect — Thème Roundcube
   #777D59 (olive)   → structure / menu latéral
   #598683 (teal)    → accent principal / liens / sélections
   #D7AB39 (or)      → boutons CTA / actions
   #EA9990 (rose)    → badges / notifications
   #FFFFFF           → fond
   ============================================================= */

/* --- Typographie globale --- */
body, html, input, select, textarea, button, .btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  line-height: 1.6;
  color: #3a3d2e;
}

/* =============================================
   MENU LATÉRAL — #layout-menu + #taskmenu
   Toutes les variantes elastic couvertes
   ============================================= */
#layout-menu,
#layout #taskmenu,
#taskmenu {
  background-color: #777D59 !important;
  background: #777D59 !important;
}

/* Mobile popover header */
#layout-menu .popover-header,
#layout-menu.popover .popover-header {
  background-color: #777D59 !important;
  background: #777D59 !important;
}

/* Boutons spéciaux en bas du menu */
#taskmenu .special-buttons,
#layout-menu .special-buttons {
  background-color: #777D59 !important;
}

/* Liens du menu */
#taskmenu a,
#layout #taskmenu a {
  color: rgba(255,255,255,0.78) !important;
}

/* État sélectionné / hover — remplace #45555c */
#taskmenu a.selected,
#taskmenu a.selected:hover,
#layout #taskmenu a.selected,
#layout #taskmenu a.selected:hover {
  background: rgba(89,134,131,0.45) !important;
  background-color: rgba(89,134,131,0.45) !important;
  color: #fff !important;
}

#taskmenu a:hover,
#taskmenu a:focus,
#layout #taskmenu a:hover,
#layout #taskmenu a:focus {
  background: rgba(255,255,255,0.12) !important;
  background-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* Boutons d'action (compose, etc.) */
#taskmenu .action-buttons a,
#layout #taskmenu .action-buttons a {
  color: #D7AB39 !important;
  background: transparent !important;
}

#taskmenu .action-buttons a:hover,
#layout #taskmenu .action-buttons a:hover {
  color: #fff !important;
  background: rgba(215,171,57,0.22) !important;
}

/* Déconnexion */
#taskmenu a.logout,
#taskmenu a.logout:hover {
  color: #EA9990 !important;
}

/* Drag layer */
#rcmdraglayer {
  background-color: #777D59 !important;
}

/* =============================================
   HEADER / TOOLBAR
   ============================================= */
#layout .header,
#layout-list .header,
#layout-sidebar .header,
#layout-content .header,
.header {
  background-color: #f7f7f4 !important;
  border-bottom: 1px solid #e0e0d8 !important;
  color: #3a3d2e !important;
}

.toolbar,
#layout .toolbar {
  background-color: #f7f7f4 !important;
  border-bottom: 1px solid #e0e0d8 !important;
}

.toolbar a, .toolbar button, .toolbar .btn {
  color: #3a3d2e !important;
}

.toolbar a:hover, .toolbar button:hover {
  background-color: rgba(119,125,89,0.10) !important;
  color: #777D59 !important;
}

/* =============================================
   BOUTONS PRIMAIRES — Or #D7AB39
   ============================================= */
.btn-primary,
a.button.primary,
input[type="submit"],
#login-form .btn-primary {
  background-color: #D7AB39 !important;
  border-color: #c49930 !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(215,171,57,0.22) !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
}

.btn-primary:hover,
a.button.primary:hover,
input[type="submit"]:hover {
  background-color: #c49930 !important;
  border-color: #b08828 !important;
  box-shadow: 0 4px 14px rgba(215,171,57,0.32) !important;
}

.btn-primary:focus, a.button.primary:focus {
  box-shadow: 0 0 0 3px rgba(215,171,57,0.30) !important;
}

.btn-secondary {
  background-color: #f7f7f4 !important;
  border-color: #ddddd5 !important;
  color: #3a3d2e !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}

.btn-secondary:hover {
  background-color: #ededea !important;
  color: #3a3d2e !important;
}

.btn, button, a.button,
.input-group-append .btn,
.input-group-prepend .btn {
  border-radius: 10px !important;
}

/* =============================================
   COULEUR PRINCIPALE (remplace #37beff partout)
   ============================================= */
a, .message-part a {
  color: #598683 !important;
}
a:hover { color: #3d6360 !important; }

/* Menus hover */
.menu a:hover, .menu a:focus,
.popupmenu a:hover, .dropdownmenu a:hover {
  background-color: #598683 !important;
  color: #fff !important;
}

/* Toolbar menu */
.toolbar-menu a:hover,
.toolbar-menu li:hover {
  background-color: #598683 !important;
  color: #fff !important;
}

/* =============================================
   INPUTS / FORMULAIRES
   ============================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select, textarea, .form-control {
  border-radius: 10px !important;
  border: 1.5px solid #ddddd5 !important;
  background-color: #fff !important;
  color: #3a3d2e !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: #598683 !important;
  box-shadow: 0 0 0 3px rgba(89,134,131,0.18) !important;
  outline: none !important;
}

/* =============================================
   LISTE MESSAGES
   ============================================= */
#messagelist, .listing {
  background-color: #fff !important;
}

#messagelist tbody tr:hover,
.listing tbody tr:hover,
.listing li:hover {
  background-color: #f2f7f7 !important;
}

#messagelist tbody tr.selected,
.listing tbody tr.selected,
.listing li.selected {
  background-color: #e6efee !important;
  color: #3a3d2e !important;
}

/* Indicateur focus liste */
.listing li .focus-indicator,
#messagelist .focus-indicator {
  background-color: #598683 !important;
}

/* Badges non lus */
.listing td .badge,
.badge-count,
.listing .unread-count {
  background-color: #EA9990 !important;
  color: #fff !important;
  border-radius: 20px !important;
}

.listing .recent,
.listing td .unread {
  color: #598683 !important;
}

/* =============================================
   SÉPARATEURS / LAYOUT
   ============================================= */
#layout-sidebar, #layout-list {
  border-right: 1px solid #e0e0d8 !important;
}

/* =============================================
   PAGE DE CONNEXION
   ============================================= */
.task-login #layout-content {
  background: linear-gradient(135deg, #f9f9f6 0%, #ffffff 55%, #f2f7f7 100%) !important;
}

#login-form {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(119,125,89,0.12), 0 1px 4px rgba(119,125,89,0.06) !important;
  padding: 2.5rem 2rem !important;
  border: 1px solid rgba(119,125,89,0.10) !important;
}

#logo, .task-login #logo {
  max-height: 56px !important;
  width: auto !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
}

/* =============================================
   DIALOGS / MODALES
   ============================================= */
.ui-dialog {
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(58,61,46,0.14) !important;
  border: none !important;
  overflow: hidden !important;
}

.ui-dialog .ui-dialog-titlebar {
  background-color: #f7f7f4 !important;
  border-bottom: 1px solid #e0e0d8 !important;
  color: #3a3d2e !important;
  border-radius: 16px 16px 0 0 !important;
  font-weight: 600 !important;
}

.ui-dialog .ui-dialog-content {
  background: #fff !important;
}

/* Bouton fermer dialog */
.ui-dialog .ui-dialog-titlebar-close {
  color: #777D59 !important;
}

/* =============================================
   MENUS DROPDOWN / POPOVER
   ============================================= */
.popupmenu, .dropdownmenu,
.rcube-popup, ul.menu {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(58,61,46,0.14) !important;
  border: 1px solid #e0e0d8 !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* =============================================
   RECHERCHE
   ============================================= */
#searchbar, .searchbar {
  background-color: #f7f7f4 !important;
  border-radius: 10px !important;
}

#searchbar .input-group,
.searchbar .input-group {
  border-radius: 10px !important;
}

/* =============================================
   CASES À COCHER / RADIOS
   ============================================= */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: #598683 !important;
}

/* Checkbox custom roundcube */
.custom-checkbox .checkmark,
input.checkbox:checked {
  background-color: #598683 !important;
  border-color: #598683 !important;
}

/* =============================================
   SCROLLBARS
   ============================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f7f7f4; }
::-webkit-scrollbar-thumb { background: #c5c8b4; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #777D59; }

/* =============================================
   NOTIFICATIONS / MESSAGES SYSTÈME
   ============================================= */
#messagestack .notice, .message.notice {
  background-color: rgba(89,134,131,0.08) !important;
  border-left: 3px solid #598683 !important;
  border-radius: 8px !important;
}

#messagestack .confirmation, .message.confirmation {
  background-color: rgba(215,171,57,0.08) !important;
  border-left: 3px solid #D7AB39 !important;
  border-radius: 8px !important;
}

#messagestack .error, .message.error {
  border-left: 3px solid #EA9990 !important;
  border-radius: 8px !important;
}

/* =============================================
   APERÇU EMAIL
   ============================================= */
#message-header {
  background-color: #f7f7f4 !important;
  border-bottom: 1px solid #e0e0d8 !important;
}

.message-headers .subject {
  color: #3a3d2e !important;
  font-weight: 600 !important;
}

/* =============================================
   ONGLETS
   ============================================= */
.tabsbar a.selected,
.tabsbar a.active {
  color: #598683 !important;
  border-bottom: 2px solid #598683 !important;
}

/* =============================================
   QUOTA / PROGRESS
   ============================================= */
.quota .bar, .progressbar .bar,
.quota-value {
  background-color: #D7AB39 !important;
  border-radius: 4px !important;
}

/* =============================================
   DOSSIERS / SIDEBAR FOLDERS
   ============================================= */
#folderlist-content {
  background: #fff !important;
}

#folderlist-content li a:hover {
  background-color: #f2f7f7 !important;
  color: #598683 !important;
}

#folderlist-content li a.selected,
#folderlist-content li.selected > a {
  background-color: #e6efee !important;
  color: #598683 !important;
  font-weight: 600 !important;
}

/* =============================================
   FOOTER
   ============================================= */
#layout #footer, .footer {
  background-color: #f7f7f4 !important;
  border-top: 1px solid #e0e0d8 !important;
  color: #777D59 !important;
}

/* =============================================
   OVERRIDES @MEDIA — couvrir les règles elastic
   dans les breakpoints (481px, 769px, 1025px)
   ============================================= */
@media screen and (min-width: 481px) {
  #layout-menu,
  #layout-menu .popover-header {
    background-color: #777D59 !important;
    background: #777D59 !important;
  }

  #taskmenu a.selected,
  #taskmenu a.selected:hover {
    background: rgba(89,134,131,0.45) !important;
    color: #fff !important;
  }

  #taskmenu a:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
  }

  #taskmenu .special-buttons {
    background-color: #777D59 !important;
  }

  #taskmenu .action-buttons a {
    color: #D7AB39 !important;
    background: transparent !important;
  }

  #taskmenu .action-buttons a:hover {
    color: #fff !important;
    background: rgba(215,171,57,0.22) !important;
  }

  #taskmenu a.logout,
  #taskmenu a.logout:hover {
    color: #EA9990 !important;
  }
}

@media screen and (max-width: 480px) {
  #layout-menu {
    background-color: #777D59 !important;
  }
}