/* XOBIT — Elastic Full-child-skin, shell + navigatie + berichtenlijst
   (fase 2, stap 1). Geladen op elke pagina via includes/layout.html
   (dus NIET actief op de inlogpagina, die blijft xobit-login.css uit
   elastic_xobit — zelfde ID's als #layout-content worden hieronder
   met `body:not(.task-login)` gescoped om dat gegarandeerd te laten
   samenleven).

   Strategie: Elastic's eigen flex/grid-layout en responsive/mobiele
   gedrag blijven ONGEMOEID — alleen kleuren, fonts, borders en
   state-highlighting (selected/unread/flagged/hover) worden
   overschreven. Licht/donker via html.dark-mode /
   html:not(.dark-mode) — zie includes/layout.html voor de
   cookie-logica (standaard donker, expliciete keuze voor licht
   wordt onthouden). */

html.dark-mode{
  --bg:      #0C1220;
  --panel:   #121A2C;
  --line:    #243049;
  --ink:     #E9EDF4;
  --muted:   #93A0B8;
  --amber:   #E8A33D;
  --amber-2: #FFC46B;
  --steel:   #6FA3D8;
  --err:     #E07070;
  --ok:      #7BC97B;
}
html:not(.dark-mode){
  --bg:      #F4F1EA;
  --panel:   #FFFFFF;
  --line:    #DDD5C7;
  --ink:     #1C1810;
  --muted:   #6B6353;
  --amber:   #B5761F;
  --amber-2: #8F5A15;
  --steel:   #2D5F8A;
  --err:     #C23B3B;
  --ok:      #3E8E4F;
}
html.dark-mode,
html:not(.dark-mode){
  --mono: 'IBM Plex Mono', Menlo, Consolas, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ---- Basis ---- */
body{
  background:var(--bg) !important;
  color:var(--ink);
  font-family:var(--sans);
}
::selection{background:var(--amber);color:var(--bg)}
a:focus-visible,
button:focus-visible,
input:focus-visible,
.button:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ---- Task-menu (Mail/Contacts/Instellingen + compose/thema/uitloggen) ---- */
#layout-menu{
  background:var(--panel) !important;
  border-color:var(--line) !important;
}
#layout-menu .popover-header{
  border-color:var(--line);
}
#layout-menu #logo{display:none} /* zelfde reden als bij login: onbetrouwbaar via child-skin te overschrijven, zie architecture.md */

#taskmenu{
  font-family:var(--mono);
  background:var(--panel);
}
/* Elastic's eigen ".special-buttons" (thema/about/uitloggen-knoppen
   onderin) en ".popover-header" (logo-hoekje bovenin) zijn specifieker
   dan de kale #taskmenu/#layout-menu hierboven (ID+class vs. kaal ID),
   dus die blijven anders altijd in Elastic's eigen vaste
   @color-taskmenu-background staan, ook in licht thema. Hier expliciet
   meegenomen met dezelfde specificiteit. */
#taskmenu .special-buttons{
  background-color:var(--panel) !important;
}
#layout-menu .popover-header{
  background-color:var(--panel) !important;
}
#taskmenu a{
  color:var(--muted);
}
#taskmenu a:hover{
  color:var(--ink);
}
#taskmenu a.selected,
#taskmenu a.mail.selected,
#taskmenu a.contacts.selected,
#taskmenu a.settings.selected{
  color:var(--amber);
}
#taskmenu .compose{
  color:var(--bg);
  background:var(--amber);
  border-radius:6px;
}
#taskmenu .compose:hover{
  background:var(--amber-2);
}
#taskmenu .theme.dark:before,
#taskmenu .theme:before{
  color:var(--amber);
}
#taskmenu .logout{color:var(--err)}
#taskmenu .logout:hover{color:var(--err);opacity:.8}

/* ---- Mappenlijst (linkerkolom) ---- */
#layout-sidebar{
  background:var(--panel);
  border-color:var(--line);
}
#layout-sidebar .header{
  border-color:var(--line);
  font-family:var(--mono);
}
#layout-sidebar .header-title.username{
  color:var(--amber);
  font-family:var(--mono);
  font-size:.85rem;
  letter-spacing:.04em;
}
ul.treelist{
  font-family:var(--sans);
}
ul.treelist li a{
  color:var(--ink);
}
ul.treelist li a:hover{
  background:rgba(232,163,61,.08);
}
ul.treelist li.selected > a,
ul.treelist li.selected{
  background:var(--amber) !important;
  color:var(--bg) !important;
}
ul.treelist li.unread > a{
  font-weight:600;
  color:var(--ink);
}
.unreadcount{
  background:var(--amber);
  color:var(--bg);
  border-radius:10px;
  font-family:var(--mono);
  font-size:.72rem;
}
#quotadisplay{
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--muted);
}
#layout-sidebar .footer.small{
  border-color:var(--line);
}

/* ---- Contacten + instellingen (fase 2, stap 3) ----
   addressbook.html/settings.html hergebruiken dezelfde #layout-sidebar/
   #layout-list/#layout-content-ID's als mail, dus kaartstijl + dots
   komen al automatisch mee. Wat nog ontbrak: de generieke rij-status
   voor Elastic's ".listing"-lijsten (contactenlijst, instellingen-
   secties, instellingen-tabbladen, groepen) — dezelfde selector-vorm
   als Elastic zelf gebruikt (".listing li.selected, .listing tr.selected td"). */
.listing li.selected,
.listing tr.selected td{
  background:var(--amber) !important;
  color:var(--bg) !important;
}
.listing li.selected a,
.listing li.selected span{
  color:var(--bg) !important;
}
.listing.iconized li{
  color:var(--ink);
  font-family:var(--sans);
}
.listing li:hover{
  background:rgba(232,163,61,.08);
}
.propform label{
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--muted);
}

/* ---- Dialogen + meldingen (fase 2, stap 4) ----
   Roundcube gebruikt jQuery UI voor bevestigingsvensters (verwijderen,
   importeren, enz.) en autocomplete-menu's — geen eigen Roundcube-
   templates, dus hier de echte jQuery UI-classes uit Elastic's
   jqueryui.less/messages.less. */
.ui-widget-overlay{
  background:rgba(12,18,32,.55);
}
.ui-dialog{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 50px -25px rgba(0,0,0,.6);
}
.ui-dialog-titlebar{
  background:var(--panel);
  border-color:var(--line);
}
.ui-dialog-title{
  color:var(--ink);
  font-family:var(--mono);
}
.ui-dialog-titlebar-close{
  color:var(--muted);
}
.ui-dialog-titlebar-close:hover{
  color:var(--amber);
}
.ui-dialog-content{
  color:var(--ink);
}
.ui-dialog-buttonpane{
  background:var(--panel);
  border-color:var(--line);
}

/* Autocomplete-/dropdown-menu's (bv. ontvangers-suggesties bij opstellen) */
.ui-menu{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
}
.ui-menu .ui-menu-item.ui-state-active,
.ui-menu .ui-menu-item:hover{
  background:var(--amber) !important;
  color:var(--bg) !important;
  border:0 !important;
}

/* Meldingen (foutmeldingen/succes/waarschuwing/laden), zowel inline
   (.ui.alert) als de toast-stack rechtsonder (#messagestack) */
.ui.alert{
  background-color:var(--panel);
  border-color:var(--line);
  color:var(--ink);
  font-family:var(--sans);
}
.ui.alert.alert-danger{border-color:var(--err)}
.ui.alert.alert-danger > i.icon:before{color:var(--err) !important}
.ui.alert.alert-success{border-color:var(--ok)}
.ui.alert.alert-success > i.icon:before{color:var(--ok) !important}
.ui.alert.alert-warning{border-color:var(--amber)}
.ui.alert.alert-warning > i.icon:before{color:var(--amber) !important}

#messagestack div{
  background-color:var(--panel) !important;
  color:var(--ink) !important;
  border:1px solid var(--line);
  border-radius:8px;
  font-family:var(--sans);
}
#messagestack div.error{border-color:var(--err)}
#messagestack div.confirmation{border-color:var(--ok)}
#messagestack div.warning{border-color:var(--amber)}

/* ---- Berichtenlijst (middenkolom) ---- */
#layout-list{
  background:var(--bg);
  border-color:var(--line);
}
#mailsearchform input,
#mailsearchform .search-input{
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:6px;
}
#mailsearchform input:focus{
  border-color:var(--amber);
  box-shadow:0 0 0 .15rem rgba(232,163,61,.25);
}

.messagelist tr{
  border-color:var(--line);
}
.messagelist tr:hover td{
  background:rgba(232,163,61,.06);
}
.messagelist tr.selected td{
  background:var(--amber) !important;
  color:var(--bg) !important;
}
.messagelist tr.selected td a,
.messagelist tr.selected td span{
  color:var(--bg) !important;
}
.messagelist tr.unread td.subject span.subject{
  font-weight:700;
  color:var(--ink);
}
.messagelist tr.flagged td,
.messagelist tr.flagged td.subject span.subject a,
.messagelist tr.flagged td.subject span.date,
.messagelist tr.flagged td.subject span.fromto{
  color:var(--amber-2);
}
.messagelist td.subject span.date,
.messagelist td.subject span.fromto{
  color:var(--muted);
}

/* ---- Voorbeeldscherm (rechterkolom) — buiten de inlogpagina, die
   heeft dezelfde #layout-content-ID maar zijn eigen xobit-login.css. ---- */
body:not(.task-login) #layout-content{
  background:var(--bg);
}

/* ---- "Terminal windows": elk van de drie kolommen als eigen
   afgerond paneel met een dots-titelbalk, i.p.v. drie vlak
   aaneengesloten vlakken. Puur CSS, geen nieuwe markup nodig:
   - marge tussen de kolommen zorgt voor de "losse vensters"-look
     (werkt vanzelf, want #layout is al een flex-rij van deze drie)
   - overflow:hidden + border-radius op de buitenste container clipt
     de bestaande .header vanzelf mee tot dezelfde afgeronde hoek
   - de 3 titelbalk-bolletjes komen uit ÉÉN ::before-element met
     twee box-shadows (klassieke CSS-truc), dus geen extra HTML.
   Werkt alleen op desktop-breedte zichtbaar als 3 losse vensters;
   op mobiel toont Elastic toch al maar één van de drie tegelijk. ---- */
#layout-sidebar,
#layout-list,
body:not(.task-login) #layout-content{
  margin:8px 4px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 50px -25px rgba(0,0,0,.6);
}
#layout-sidebar{margin-left:10px}
body:not(.task-login) #layout-content{margin-right:10px}

#layout-sidebar > .header,
#layout-list > .header,
body:not(.task-login) #layout-content > .header{
  position:relative;
  background:var(--panel);
  border-color:var(--line);
  font-family:var(--mono);
}

/* Mappenlijst-header: simpele inhoud (gebruikersnaam + 1 knop).
   Elastic's eigen align-items (standaard: stretch) NIET overschrijven
   — dat verschoof de bestaande "⋮"-menuknop lager (teruggezien in een
   screenshot). Alleen de nieuwe dots krijgen hun eigen centrering via
   align-self, de rest van de header blijft ongemoeid. */
#layout-sidebar > .header{
  display:flex;
}
#layout-sidebar > .header::before{
  content:"";
  order:-1;
  flex:none;
  align-self:center;
  width:10px;
  height:10px;
  margin:0 22px 0 10px;
  border-radius:50%;
  background:#a04545;
  box-shadow:16px 0 0 var(--line), 32px 0 0 var(--line);
}

/* Berichtenlijst-/tussenkolom- en leesscherm-header (#layout-list en
   #layout-content op ELKE pagina — mail, contacten, instellingen):
   hier zit Elastic's eigen toolbar-centrering
   (`.header{justify-content:center}` + `.header-title{flex:1;margin:0
   -20rem}`, met JS die de marge per pagina naherekent — teruggezien
   als inline `style="margin-right:28px;..."` in de HTML) — een extra
   flex-item erin zetten duwt die centrering en de knoppen uit positie
   (zo gebeurd en teruggezien in een screenshot). Daarom hier bewust
   GEEN flex-item: de dots liggen los boven op de header via
   position:absolute, zodat Elastic's eigen toolbar-layout volledig
   intact blijft — dit werkt daardoor automatisch ook op pagina's waar
   deze header geen eigen ID heeft (alleen class="header"), zoals bij
   contacten en instellingen. */
#layout-list > .header::before,
body:not(.task-login) #layout-content > .header::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:#a04545;
  box-shadow:16px 0 0 var(--line), 32px 0 0 var(--line);
  pointer-events:none;
}
/* Op smalle mobiele breedte (Elastic's eigen @screen-width-xs-grens)
   toont Elastic zelf het hamburgermenu- en terug/map-icoon op exact
   deze plek — die overlapten met de dots (teruggezien in een
   screenshot). Op die breedte is er toch maar één paneel tegelijk
   zichtbaar, dus de dots leveren daar sowieso weinig toe. */
@media screen and (max-width: 480px){
  #layout-list > .header::before,
  body:not(.task-login) #layout-content > .header::before{
    display:none;
  }
}

/* ---- Generieke knoppen/inputs (werken ook door op Instellingen/Contacten,
   die dezelfde Bootstrap-achtige classes hergebruiken) ---- */
.btn-primary{
  background:var(--amber) !important;
  border-color:var(--amber) !important;
  color:var(--bg) !important;
  font-family:var(--mono);
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--amber-2) !important;
  border-color:var(--amber-2) !important;
}
.form-control{
  background:var(--bg);
  border-color:var(--line);
  color:var(--ink);
}
.form-control:focus{
  background:var(--bg);
  color:var(--ink);
  border-color:var(--amber);
  box-shadow:0 0 0 .15rem rgba(232,163,61,.25);
}

.popupmenu{
  background:var(--panel);
  border-color:var(--line);
  color:var(--ink);
}
.popupmenu .listing li.selected,
.popupmenu .listing li:hover{
  background:rgba(232,163,61,.12);
}

/* ---- Leesscherm (fase 2, stap 2) ----
   #layout-content wordt hier ook gebruikt voor het bericht-voorbeeld
   (message.html); de kaart-stijl komt al mee via de eerdere
   #layout-content-regels hierboven. */
#message-header{
  border-color:var(--line);
}
#message-header h2.subject{
  font-family:var(--mono);
  font-size:1rem;
  color:var(--ink);
}
#message-header .header-summary,
#message-header .header-headers{
  color:var(--muted);
  font-family:var(--sans);
}
#message-header .header-summary a,
#message-header .header-headers a{
  color:var(--steel);
}
#message-header .header-links a{
  color:var(--muted);
  font-family:var(--mono);
  font-size:.75rem;
}
#message-header .header-links a:hover{
  color:var(--amber);
}
table.headers-table{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--mono);
  font-size:.82rem;
}
table.headers-table td{
  border-color:var(--line);
}

/* Berichtinhoud zelf: BEWUST licht/neutraal, ongeacht licht/donker-
   thema van de app-chrome. Dit is de content van een e-mail die
   iemand anders geschreven heeft (vaak met eigen inline-kleuren) —
   die forceren op een donkere achtergrond maakt bestaande e-mails
   potentieel onleesbaar (bv. zwarte tekst op onze donkere achtergrond).
   Zelfde afweging als de meeste dark-mode-mailclients: donkere chrome,
   lichte "papier"-leeszone. */
#messagebody{
  background:#fdfdfb;
  color:#1c1810;
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px;
}

/* Bijlagenlijst — gedeeld tussen leesscherm en opstellen */
.attachmentslist li{
  border-color:var(--line);
  color:var(--ink);
  font-family:var(--sans);
}
.attachmentslist li a{
  color:var(--steel);
}
.attachmentslist li:hover{
  background:rgba(232,163,61,.08);
}

/* ---- Opstellen (fase 2, stap 2) ----
   #layout-sidebar (opties/bijlagen) en #layout-content (formulier)
   krijgen de kaart-stijl al automatisch mee via de eerdere regels,
   want compose.html hergebruikt dezelfde ID's als de mail-weergave. */
#compose-headers .col-form-label{
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--muted);
}
#compose-headers .input-group-text{
  background:var(--panel);
  border-color:var(--line);
  color:var(--muted);
}
#compose-headers .input-group-text:hover{
  color:var(--amber);
}
#compose-attachments .upload-form .btn-secondary{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--mono);
}
#compose-attachments .upload-form .btn-secondary:hover{
  border-color:var(--amber);
  color:var(--amber);
}
#compose-options .col-form-label{
  color:var(--muted);
}
#messagetoolbar a.button{
  color:var(--muted);
  font-family:var(--mono);
}
#messagetoolbar a.button:hover{
  color:var(--ink);
}
#messagetoolbar a.button.pressed,
#messagetoolbar a.button.selected{
  color:var(--amber);
}

/* Opstel-tekstvak zelf: zelfde afweging als #messagebody hierboven —
   bewust licht, want dit IS de e-mail die verstuurd gaat worden en
   moet er bij de ontvanger normaal uitzien. Geldt voor zowel de platte
   textarea als (waar van toepassing) TinyMCE's editor-iframe; dat
   laatste heeft een eigen document en wordt dus niet door deze
   stylesheet bereikt — bewust ongemoeid gelaten. */
#composebodycontainer textarea.form-control{
  background:#fdfdfb;
  color:#1c1810;
}

.formbuttons .btn-primary.send{
  min-width:120px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}