/* =========================================================
   APS Roundcube Skin
   Minimal, restrained extension of Roundcube Elastic
   ========================================================= */

/* ---------- Brand tokens ---------- */

:root {
  --aps-red: #A31621;
  --aps-blue: #4E8098;
  --aps-paper: #FCF7F8;
  --aps-charcoal: #2C333F;
  --aps-gray: #666666;

  --aps-blue-dark: #3F6A7F;
  --aps-red-dark: #86111A;

  --aps-surface: #FFFFFF;
  --aps-surface-alt: #F4F5F6;
  --aps-border: #D9DDE2;

  --aps-text: #2C333F;
  --aps-text-muted: #666666;

  --aps-hover: rgba(78, 128, 152, 0.08);
  --aps-selected: rgba(78, 128, 152, 0.12);
  --aps-focus: rgba(78, 128, 152, 0.18);
}


/* =========================================================
   Base
   ========================================================= */

html,
body {
  background: var(--aps-paper);
  color: var(--aps-text);
}

body,
input,
textarea,
select,
button {
  color: var(--aps-text);
}

a {
  color: var(--aps-blue);
}

a:hover,
a:focus {
  color: var(--aps-blue-dark);
}


/* =========================================================
   Main left navigation
   ========================================================= */

#layout-menu {
  background: var(--aps-surface-alt);
  border-right: 1px solid var(--aps-border);
}

/* Normal navigation */
#layout-menu a,
#layout-menu a::before {
  color: var(--aps-charcoal) !important;
}

/* Hover */
#layout-menu a:hover,
#layout-menu a:hover::before,
#layout-menu a:focus,
#layout-menu a:focus::before {
  color: var(--aps-blue) !important;
  background: var(--aps-hover);
}

/* Active/current section */
#layout-menu .selected > a,
#layout-menu .selected > a::before,
#layout-menu .selected a,
#layout-menu .selected a::before {
  color: var(--aps-blue) !important;
  background: var(--aps-selected);
}


/* =========================================================
   Main surfaces
   ========================================================= */

#layout-sidebar,
#layout-list,
#layout-content,
.popup,
.popover,
.dropdown-menu,
.card,
.modal-content {
  background-color: var(--aps-surface);
  color: var(--aps-text);
}

#layout-sidebar,
#layout-list,
#layout-content,
.card,
.dropdown-menu,
.popover,
.modal-content {
  border-color: var(--aps-border);
}


/* =========================================================
   Compose / toolbar actions
   ========================================================= */

/* Compose is the primary action */
a.compose,
a.compose::before,
.toolbar a.compose,
.toolbar a.compose::before {
  color: var(--aps-blue) !important;
}

a.compose:hover,
a.compose:hover::before,
a.compose:focus,
a.compose:focus::before {
  color: var(--aps-blue-dark) !important;
}

/* Normal communication actions */
a.reply,
a.reply::before,
a.reply-all,
a.reply-all::before,
a.forward,
a.forward::before {
  color: var(--aps-blue) !important;
}

a.reply:hover,
a.reply:hover::before,
a.reply-all:hover,
a.reply-all:hover::before,
a.forward:hover,
a.forward:hover::before {
  color: var(--aps-blue-dark) !important;
}

/* Delete is the only strongly red toolbar action */
a.delete,
a.delete::before {
  color: var(--aps-red) !important;
}

a.delete:hover,
a.delete:hover::before,
a.delete:focus,
a.delete:focus::before {
  color: var(--aps-red-dark) !important;
}

/* Secondary toolbar actions */
a.markmessage,
a.markmessage::before,
a.more,
a.more::before,
a.options,
a.options::before,
a.threads,
a.threads::before,
a.select,
a.select::before {
  color: var(--aps-gray) !important;
}


/* =========================================================
   Buttons
   ========================================================= */

/* Primary buttons use APS blue */
.btn-primary,
button.btn-primary,
input.btn-primary {
  background-color: var(--aps-blue);
  border-color: var(--aps-blue);
  color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus {
  background-color: var(--aps-blue-dark);
  border-color: var(--aps-blue-dark);
  color: #FFFFFF;
}

/* Destructive buttons only */
.btn-danger,
button.btn-danger,
input.btn-danger {
  background-color: var(--aps-red);
  border-color: var(--aps-red);
  color: #FFFFFF;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--aps-red-dark);
  border-color: var(--aps-red-dark);
  color: #FFFFFF;
}

.btn-secondary,
button.btn-secondary {
  border-color: var(--aps-border);
}


/* =========================================================
   Message / folder selections
   ========================================================= */

.listing li.selected,
.listing tr.selected td,
.listing tbody tr.selected td,
.listing tbody tr.selected > td {
  background-color: var(--aps-selected) !important;
}

.listing li:hover,
.listing tbody tr:hover td {
  background-color: var(--aps-hover);
}

.listing .unread,
.listing tr.unread td {
  font-weight: 600;
}


/* =========================================================
   Folder tree
   ========================================================= */

.treelist li.selected > a,
.treelist li.selected > div {
  background-color: var(--aps-selected);
}

.treelist li.selected > a {
  color: var(--aps-blue-dark);
}

.treelist li a:hover {
  background-color: var(--aps-hover);
}


/* =========================================================
   Forms
   ========================================================= */

.form-control,
input,
textarea,
select {
  background-color: var(--aps-surface);
  border-color: var(--aps-border);
  color: var(--aps-text);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--aps-blue);
  box-shadow: 0 0 0 0.2rem var(--aps-focus);
  outline: none;
}


/* =========================================================
   Secondary / muted text
   ========================================================= */

.text-muted,
.secondary,
.hint,
.hintbox,
.description,
small {
  color: var(--aps-text-muted) !important;
}


/* =========================================================
   Counters / status
   ========================================================= */

.badge,
.count,
.unreadcount {
  background-color: var(--aps-blue);
  color: #FFFFFF;
}

/* Errors stay red */
.badge-danger,
.error,
.alert-danger {
  background-color: var(--aps-red);
  border-color: var(--aps-red);
  color: #FFFFFF;
}


/* =========================================================
   Borders / separators
   ========================================================= */

table,
td,
th,
.listing,
.listbox,
.formcontent {
  border-color: var(--aps-border);
}


/* =========================================================
   Scrollbars
   ========================================================= */

* {
  scrollbar-color: var(--aps-gray) transparent;
}


/* =========================================================
   Message reading pane
   ========================================================= */

#messageheader,
#messageheader *,
#messageheaders,
#messageheaders *,
.message-partheaders,
.message-partheaders *{
  color: var(--aps-text) !important;
}

#messageheader .subject,
#messageheaders .subject,
#messageheader .from,
#messageheader .to,
#messageheader .date {
  color: var(--aps-charcoal) !important;
}

#messageheader .header-title,
#messageheader .header-content,
#messageheaders .header-title,
#messageheaders .header-content {
  color: var(--aps-text) !important;
}

#messageheader a,
#messageheaders a {
  color: var(--aps-blue) !important;
}

/* =========================================================
   Dark mode
   ========================================================= */

@media (prefers-color-scheme: dark) {

  :root {
    --aps-paper: #171B21;
    --aps-surface: #20252D;
    --aps-surface-alt: #252B33;
    --aps-border: #404752;

    --aps-text: #F2F3F4;
    --aps-text-muted: #B4B8BD;

    --aps-hover: rgba(78, 128, 152, 0.12);
    --aps-selected: rgba(78, 128, 152, 0.20);
    --aps-focus: rgba(78, 128, 152, 0.26);
  }

  html,
  body {
    background: var(--aps-paper);
    color: var(--aps-text);
  }

  #layout-menu {
    background: #20252D;
    border-right-color: var(--aps-border);
  }

  #layout-menu a,
  #layout-menu a::before {
    color: #D7DADF !important;
  }

  #layout-menu a:hover,
  #layout-menu a:hover::before,
  #layout-menu a:focus,
  #layout-menu a:focus::before {
    color: #7EA8BC !important;
    background: var(--aps-hover);
  }

  #layout-menu .selected > a,
  #layout-menu .selected > a::before,
  #layout-menu .selected a,
  #layout-menu .selected a::before {
    color: #7EA8BC !important;
    background: var(--aps-selected);
  }

  #layout-sidebar,
  #layout-list,
  .popup,
  .popover,
  .dropdown-menu,
  .card,
  .modal-content,
  .form-control,
  input,
  textarea,
  select {
    background-color: var(--aps-surface);
    color: var(--aps-text);
    border-color: var(--aps-border);
  }

  /* Roundcube keeps the message reading pane light even in dark mode */
  #layout-content {
    color: #2C333F;
  }

  a {
    color: #6F9DB3;
  }

  a:hover,
  a:focus {
    color: #8DB3C5;
  }

  a.compose,
  a.compose::before,
  a.reply,
  a.reply::before,
  a.reply-all,
  a.reply-all::before,
  a.forward,
  a.forward::before {
    color: #6F9DB3 !important;
  }

  a.compose:hover,
  a.compose:hover::before,
  a.reply:hover,
  a.reply:hover::before,
  a.reply-all:hover,
  a.reply-all:hover::before,
  a.forward:hover,
  a.forward:hover::before {
    color: #8DB3C5 !important;
  }

  a.delete,
  a.delete::before {
    color: #C94A54 !important;
  }

  a.delete:hover,
  a.delete:hover::before {
    color: #E06A73 !important;
  }

  .text-muted,
  .secondary,
  .hint,
  .hintbox,
  .description,
  small {
    color: var(--aps-text-muted) !important;
  }

  .listing li:hover,
  .listing tbody tr:hover td {
    background-color: var(--aps-hover);
  }

/* Message reading pane remains light in Roundcube dark mode */
#layout-content,
#messageheader,
#messageheader *,
#messageheaders,
#messageheaders *,
.message-partheaders,
.message-partheaders *,
#layout-content .header,
#layout-content .header * {
  color: #2C333F !important;
}

/* Links in message headers */
#messageheader a,
#messageheaders a,
.message-partheaders a,
#layout-content .header a {
  color: #4E8098 !important;
}

#messageheader a:hover,
#messageheaders a:hover,
.message-partheaders a:hover,
#layout-content .header a:hover {
  color: #3F6A7F !important;
}
}