/*
 * Twowin Почта — habillage « Bitrix24 » du skin Elastic (Roundcube 1.6), aligné sur le
 * thème du CRM (docs/THEME-BITRIX24.md) :
 *   dégradé #2b3a8f → #5b3fa8 (menu + dossiers, texte blanc), cartes blanches arrondies
 *   (12 px), accent #2fc6f6 (sélection, focus), liens #2067b0, action principale verte
 *   #14883f, police système, rayons 10–12 px.
 * Feuille simple, sans LESS : chargée APRÈS styles.css du skin (rcmail_output_html insère
 * les CSS des plugins avant le premier <script> du <head>).
 * Contrastes (WCAG AA) : voir README.md, section « Thème ».
 */

:root {
  --tw-grad: linear-gradient(160deg, #2b3a8f 0%, #3d3c9c 45%, #5b3fa8 100%);
  --tw-accent: #2fc6f6;
  --tw-accent-soft: #e5f6fe;
  --tw-link: #2067b0;
  --tw-green: #14883f;
  --tw-green-hover: #0f7334;
  --tw-text: #333;
  --tw-muted: #535c69;
  --tw-border: #e3e8ec;
  --tw-bg-soft: #f5f7f8;
  --tw-red: #d92f2a;
  --tw-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Police système (comme Bitrix24 « Air » et le CRM)                   */
/* ------------------------------------------------------------------ */
body, button, input, optgroup, select, textarea, .popover, .ui-dialog, .ui-widget,
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: var(--tw-font);
}

/* ------------------------------------------------------------------ */
/* Fond : dégradé Bitrix                                              */
/* ------------------------------------------------------------------ */
html:not(.iframe) body {
  background: #2b3a8f var(--tw-grad) fixed;
}
html.iframe body { background: #fff; }

a, .btn-link, a.btn-link { color: var(--tw-link); }
a:hover, .btn-link:hover { color: #174f88; }

/* ------------------------------------------------------------------ */
/* Menu des tâches (colonne de gauche)                                */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 481px) {
  #layout-menu,
  #layout-menu .popover-header,
  #taskmenu .special-buttons {
    background: transparent !important;
  }
  #layout-menu { border-right: 0; }
  #layout-menu .popover-header img { padding: .5rem; }

  #taskmenu a,
  #taskmenu a:focus {
    color: #fff;
    background: transparent;
    border-radius: 10px;
  }
  #taskmenu a:hover,
  #taskmenu a.selected:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
  }
  #taskmenu a.selected,
  #taskmenu a.selected:focus {
    color: #fff;
    background: rgba(255, 255, 255, .2);
  }
  #taskmenu a:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: -2px; }

  /* « Написать » : bouton vert comme « + Создать » du CRM */
  #taskmenu .action-buttons a.compose,
  #taskmenu .action-buttons a.compose:focus {
    color: #fff;
    background: var(--tw-green);
    box-shadow: 0 2px 8px rgba(10, 60, 30, .35);
  }
  #taskmenu .action-buttons a.compose:hover,
  #taskmenu .action-buttons a.compose.selected {
    color: #fff;
    background: var(--tw-green-hover);
  }
  #taskmenu a.logout,
  #taskmenu a.logout:hover { color: #ffd9d7 !important; }
  #taskmenu a.logout:hover { background: rgba(217, 47, 42, .35); }
}
/* Thème unique (clair) : pas de bascule sombre */
#taskmenu a.theme { display: none !important; }

@media screen and (min-width: 1025px) {
  #taskmenu a { width: calc(5.6 * 14px - 8px); margin: 2px 4px; }
  #taskmenu a span.inner { font-size: 12px; letter-spacing: -.01em; }
  #taskmenu .action-buttons a.compose { margin: 6px 4px 10px; }
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
  #taskmenu a { margin: 2px auto; }
}

/* ------------------------------------------------------------------ */
/* Colonne des dossiers / sections : sur le dégradé, texte blanc      */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  #layout-sidebar:not(.sidebar-right) {
    background: transparent;
    border-right: 0;
    color: #fff;
  }
  #layout-sidebar:not(.sidebar-right) > .header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
  }
  #layout-sidebar:not(.sidebar-right) > .header a.button,
  #layout-sidebar:not(.sidebar-right) > .header .header-title { color: #fff; }
  #layout-sidebar:not(.sidebar-right) > .header a.button:hover { background: rgba(255, 255, 255, .14); }
  #layout-sidebar:not(.sidebar-right) > .footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .9);
  }

  #layout-sidebar:not(.sidebar-right) .listing li,
  #layout-sidebar:not(.sidebar-right) .listing li a,
  #layout-sidebar:not(.sidebar-right) .listing li > a:before,
  #layout-sidebar:not(.sidebar-right) .listing li div.treetoggle,
  #layout-sidebar:not(.sidebar-right) .listing li a span.unreadcount ~ * {
    color: #fff;
  }
  #layout-sidebar:not(.sidebar-right) .listing li { border: 0; background: transparent; }
  #layout-sidebar:not(.sidebar-right) .listing li > a,
  #layout-sidebar:not(.sidebar-right) .listing li > div > a {
    border-radius: 10px;
    margin: 1px 8px;
  }
  #layout-sidebar:not(.sidebar-right) .listing li > a:hover,
  #layout-sidebar:not(.sidebar-right) .listing li.droptarget > a {
    background: rgba(255, 255, 255, .12);
  }
  #layout-sidebar:not(.sidebar-right) .listing li.selected > a,
  #layout-sidebar:not(.sidebar-right) .listing li.selected > div > a,
  #layout-sidebar:not(.sidebar-right) .listing li.selected {
    background-color: transparent;
    color: #fff;
  }
  #layout-sidebar:not(.sidebar-right) .listing li.selected > a,
  #layout-sidebar:not(.sidebar-right) .listing li.selected > div > a {
    background: rgba(255, 255, 255, .2);
    font-weight: 600;
  }
  #layout-sidebar:not(.sidebar-right) .listing li.unread > a { font-weight: 700; }
  /* indicateur de focus clavier de la liste */
  #layout-sidebar:not(.sidebar-right) .listing li.focused > a,
  #layout-sidebar:not(.sidebar-right) .listing:focus li.focused > a {
    outline: 2px solid var(--tw-accent);
    outline-offset: -2px;
  }
  #layout-sidebar:not(.sidebar-right) .listing li a span.unreadcount {
    background: #fff;
    color: #2b3a8f;
    font-weight: 700;
    border-radius: 10px;
  }
  #layout-sidebar:not(.sidebar-right) .listing li.virtual > a { color: rgba(255, 255, 255, .7); }

  /* Quota */
  #layout-sidebar .quota-widget { color: rgba(255, 255, 255, .92); }
  #layout-sidebar .quota-widget .bar { background: rgba(255, 255, 255, .25); border-color: transparent; }
  #layout-sidebar .quota-widget .bar .value { background: var(--tw-accent); }
  #layout-sidebar .quota-widget .count { color: #fff; }
}

/* ------------------------------------------------------------------ */
/* Liste et contenu : cartes blanches arrondies sur le dégradé         */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  html:not(.iframe) body:not(.task-login) #layout { padding: 8px 8px 8px 0; gap: 8px; }
  html:not(.iframe) body:not(.task-login) #layout > #layout-list,
  html:not(.iframe) body:not(.task-login) #layout > #layout-content,
  html:not(.iframe) body:not(.task-login) #layout > #layout-sidebar.sidebar-right {
    background: #fff;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(20, 16, 70, .22);
    overflow: hidden;
  }
  html:not(.iframe) #layout > #layout-sidebar:not(.sidebar-right) { margin-right: -8px; }
}

#layout > div > .header,
#layout-content > .header,
#layout-list > .header {
  background: #fff;
  border-bottom: 1px solid var(--tw-border);
  color: var(--tw-text);
}
#layout > div > .footer { background: #fff; border-top: 1px solid var(--tw-border); }
#layout > div > .header a.button,
.toolbar a.button,
#layout-content > .header .toolbar a { color: var(--tw-muted); }
#layout > div > .header a.button:hover,
.toolbar a.button:hover,
.toolbar a:not(.disabled):hover {
  color: var(--tw-link);
  background-color: var(--tw-bg-soft);
  border-radius: 10px;
}
.toolbar a.disabled, .toolbar a.button.disabled { color: #a2a9b1; }

/* Recherche */
.searchbar,
#layout-list .searchbar { background: var(--tw-bg-soft); }
.searchbar input { border-radius: 10px; }
.searchbar input:focus { background: #fff; }

/* ------------------------------------------------------------------ */
/* Listes (messages, contacts, réglages)                              */
/* ------------------------------------------------------------------ */
.listing li.selected,
.listing li.selected > a,
table.listing tr.selected td,
table.records-table tr.selected td {
  background-color: var(--tw-accent-soft);
  color: var(--tw-text);
}
table.messagelist tr.selected td:first-child,
table.listing tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--tw-accent); }
table.listing tr.focused > td:first-child,
.listing li.focused { outline: 0; }
table.messagelist tr.unread td.subject span.subject a,
table.messagelist tr.unread td span.fromto,
table.messagelist tr.unread td.subject span.fromto { font-weight: 700; color: #1f2a37; }
table.messagelist td.subject span.date,
table.messagelist td.subject span.size,
table.messagelist td span.fromto { color: var(--tw-muted); }
table.messagelist tr.flagged td,
table.messagelist tr.flagged td a,
table.messagelist tr.flagged td span { color: var(--tw-red); }
#messagelist tr td span.msgicon.status.unread:before,
#messagelist tr td span.msgicon.unread:before { color: var(--tw-accent); }
table.messagelist tr td span.flag span.flagged:before { color: var(--tw-red); }
.listing li a span.unreadcount,
table.messagelist tr td .threads { background-color: var(--tw-accent); color: #0b2a3a; }
table.messagelist tr.thread.expanded td,
table.messagelist tr.thread td { background: inherit; }

/* Compteur de non-lus dans la liste des dossiers mobile (fond blanc) */
@media screen and (max-width: 768px) {
  .listing li a span.unreadcount { background-color: var(--tw-link); color: #fff; }
}

/* ------------------------------------------------------------------ */
/* Boutons, champs, cases                                             */
/* ------------------------------------------------------------------ */
.btn { border-radius: 10px; }
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--tw-green);
  border-color: var(--tw-green);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--tw-green-hover);
  border-color: var(--tw-green-hover);
  color: #fff;
}
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
  background-color: #fff;
  border-color: #c6cdd3;
  color: var(--tw-link);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #eef6fd;
  border-color: var(--tw-link);
  color: var(--tw-link);
}
.btn-danger { background-color: var(--tw-red); border-color: var(--tw-red); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(47, 198, 246, .45); }

.form-control, .custom-select, .input-group-text { border-radius: 8px; }
.form-control:focus, .custom-select:focus {
  border-color: var(--tw-accent);
  box-shadow: 0 0 0 3px rgba(47, 198, 246, .3);
}
input.form-check-input:checked,
input[type=checkbox].form-check-input:checked,
.custom-switch .custom-control-input:checked ~ .custom-control-label:before,
.custom-control-input:checked ~ .custom-control-label:before {
  background-color: var(--tw-link);
  border-color: var(--tw-link);
}

/* Menus contextuels et fenêtres */
.popover, .popupmenu.popover { border-radius: 10px; border-color: var(--tw-border); box-shadow: 0 6px 24px rgba(20, 16, 70, .2); }
.popover .menu a.active:hover,
.popover .menu li:hover > a.active,
.menu.listing a.active:focus,
ul.menu a.active:hover {
  background-color: var(--tw-link);
  color: #fff;
}
.ui-dialog { border-radius: 12px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { background: #fff; border-bottom: 1px solid var(--tw-border); }
.ui-dialog .ui-dialog-buttonpane { background: var(--tw-bg-soft); }

/* Messages (en bas de l'écran) */
#messagestack div.notice, #messagestack div.loading { background: #2b3a8f; color: #fff; }
#messagestack div.confirmation { background: var(--tw-green); color: #fff; }
#messagestack div.error { background: var(--tw-red); color: #fff; }
#messagestack div { border-radius: 10px; }

/* ------------------------------------------------------------------ */
/* Lecture d'un message                                                */
/* ------------------------------------------------------------------ */
#message-header h2.subject { font-weight: 600; color: #1f2a37; }
#message-header .header-headers,
#message-header .header-summary { color: var(--tw-muted); }
#message-header a.rcmContactAddress,
#message-header .header a { color: var(--tw-link); }
#message-content .leftcol .attachmentslist li { border-radius: 10px; }
div.message-part blockquote { border-left-color: #2b3a8f; }

/* ------------------------------------------------------------------ */
/* Page de connexion                                                  */
/* ------------------------------------------------------------------ */
body.task-login #layout-content {
  background: transparent !important;
  box-shadow: none;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px 12px;
}
body.task-login #logo {
  position: static;
  top: auto;
  max-height: none;
  width: 100%;
  max-width: 380px;
  height: auto;
  padding: 32px 36px 8px;
  background: #fff;
  border-radius: 14px 14px 0 0;
  box-sizing: border-box;
}
body.task-login #login-form {
  top: auto;
  width: 100%;
  max-width: 380px;
  padding: 16px 36px 28px;
  background: #fff;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 22px 34px -14px rgba(10, 8, 50, .45);
  box-sizing: border-box;
}
body.task-login #login-form .form-control { height: 42px; font-size: 15px; }
body.task-login #rcmloginsubmit { height: 42px; font-size: 15px; font-weight: 600; margin-top: 8px; }
body.task-login #login-footer { color: var(--tw-muted); }
.form-control::placeholder { color: #6b7480; opacity: 1; }
body.task-login .noscriptwarning { color: #fff; }
body.task-login #messagestack div { max-width: 380px; }

/* ------------------------------------------------------------------ */
/* Petits écrans : fonds clairs (le dégradé reste derrière le menu)     */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  html:not(.iframe) #layout > div:not(#layout-menu) { background: #fff; }
  #layout-sidebar .listing li a,
  #layout-sidebar .listing li > a:before { color: var(--tw-text); }
}
@media screen and (max-width: 480px) {
  #layout-menu, #layout-menu .popover-header { background: var(--tw-grad) !important; }
  #taskmenu a { color: #fff; border-bottom-color: rgba(255, 255, 255, .15) !important; }
}

@media print {
  html:not(.iframe) body { background: #fff; }
}