/*
 * SIDA skin overlay for Roundcube (Elastic base).
 * Layered via plugin sida_features include_stylesheet() at render_page.
 * Aligns iframe contents at /chat/email with the host SIDA design system
 * (palette --sida-primary #2E7BFF + --sida-accent #FFA43B + white-glass).
 *
 * Strategy:
 *  - Do NOT swap $config['skin']; we stay on Elastic for structure/JS.
 *  - Override colors + surfaces + accent + active states.
 *  - Keep Elastic layout (rows/columns) intact for muscle-memory.
 *  - Mobile/responsive Elastic still works (we target desktop primarily).
 */

:root,
html body {
  --sida-primary:       #2E7BFF;
  --sida-primary-light: #E0EEFF;
  --sida-primary-dark:  #1A5BC2;
  --sida-accent:        #FFA43B;
  --sida-accent-strong: #FF8A0E;
  --sida-bg:            linear-gradient(180deg, #4A9EFF 0%, #2E7BFF 40%, #5CB8FF 100%);
  --sida-glass:         rgba(255,255,255,0.10);
  --sida-glass-strong:  rgba(255,255,255,0.92);
  --sida-border:        rgba(255,255,255,0.18);
  --sida-text:          #ffffff;
  --sida-text-muted:    rgba(255,255,255,0.78);
  --sida-text-on-light: #1a2332;
  --sida-radius:        14px;
  --sida-shadow:        0 8px 32px rgba(0,0,0,0.18);
}

/* Body / page background: SIDA gradient instead of Elastic flat. */
html,
html body.task-mail,
html body.task-login,
html body.task-settings,
html body.task-addressbook {
  background: var(--sida-bg) !important;
  color: var(--sida-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
}

/* Top navigation bar — dark glass. */
#topnav,
.menu.toolbar,
.header,
#layout-content > .header,
#layout-sidebar > .header {
  background: rgba(13, 26, 51, 0.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sida-border) !important;
  color: var(--sida-text) !important;
  box-shadow: var(--sida-shadow);
}
#topnav a,
.menu.toolbar a,
.header a,
.header .button {
  color: var(--sida-text) !important;
}

/* Layout panes — white-glass cards. */
#layout,
#layout-content,
#layout-sidebar,
#layout-list,
.content,
.mainpanel {
  background: transparent !important;
}
#layout-content .formcontent,
#layout-list .listing,
.contentbox,
.messagelist {
  background: var(--sida-glass-strong) !important;
  color: var(--sida-text-on-light) !important;
  border-radius: var(--sida-radius);
  box-shadow: var(--sida-shadow);
  border: 1px solid var(--sida-border);
}

/* Message list rows — alternating glass tint, accent on hover/selected. */
.messagelist tr,
.listing tr {
  background: rgba(255,255,255,0.0) !important;
  color: var(--sida-text-on-light) !important;
  border-bottom: 1px solid rgba(26,35,50,0.06);
}
.messagelist tr:nth-child(even),
.listing tr:nth-child(even) {
  background: rgba(46,123,255,0.03) !important;
}
.messagelist tr:hover,
.listing tr:hover {
  background: rgba(46,123,255,0.10) !important;
}
.messagelist tr.selected,
.messagelist tr.focused.selected,
.listing tr.selected {
  background: rgba(255,164,59,0.18) !important;
  color: var(--sida-text-on-light) !important;
  border-left: 3px solid var(--sida-accent) !important;
}
.messagelist tr.unread {
  font-weight: 600;
}

/* Primary/accent buttons. */
.button.primary,
.button.mainaction,
button.btn.primary,
input.button.mainaction,
a.button.mainaction {
  background: var(--sida-accent) !important;
  border-color: var(--sida-accent-strong) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(255,138,14,0.30);
}
.button.primary:hover,
.button.mainaction:hover,
button.btn.primary:hover {
  background: var(--sida-accent-strong) !important;
  filter: brightness(1.05);
}

/* Generic buttons — soft glass. */
.button,
button.btn,
a.button {
  border-radius: 10px !important;
  border: 1px solid rgba(26,35,50,0.10);
}

/* Folder list (left rail in mail). */
#mailboxlist,
.treelist,
.folderlist {
  background: rgba(13,26,51,0.45) !important;
  border-right: 1px solid var(--sida-border) !important;
  color: var(--sida-text) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#mailboxlist li a,
.treelist li a {
  color: var(--sida-text-muted) !important;
}
#mailboxlist li.selected > a,
.treelist li.selected > a {
  background: rgba(255,164,59,0.20) !important;
  color: var(--sida-text) !important;
  border-radius: 8px;
}

/* Message preview pane. */
#messagecontent,
.messagecontent,
#messagepreview {
  background: var(--sida-glass-strong) !important;
  color: var(--sida-text-on-light) !important;
  border-radius: var(--sida-radius);
}

/* Login form (rarely shown thanks to SSO, but keep on brand). */
body.task-login #layout {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.task-login #login-form {
  background: var(--sida-glass-strong) !important;
  border-radius: var(--sida-radius);
  padding: 32px !important;
  box-shadow: var(--sida-shadow);
  color: var(--sida-text-on-light) !important;
}

/* Search bars / inputs. */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
  border-radius: 10px !important;
  border: 1px solid rgba(26,35,50,0.12) !important;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--sida-primary) !important;
  box-shadow: 0 0 0 3px rgba(46,123,255,0.18) !important;
  outline: none !important;
}

/* SIDA-specific toolbar buttons (parse-xlsx, network-handoff). */
.toolbar a.button.parse-xlsx,
.toolbar a.button.network-handoff,
.toolbar a.button.sida-dillo,
.toolbar a.button.sida-network {
  background: var(--sida-accent) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  margin: 0 4px !important;
  box-shadow: 0 2px 8px rgba(255,138,14,0.30);
}
.toolbar a.button.parse-xlsx:hover,
.toolbar a.button.network-handoff:hover,
.toolbar a.button.sida-dillo:hover,
.toolbar a.button.sida-network:hover {
  background: var(--sida-accent-strong) !important;
}

/* Identification: pin a "SIDA" tag on body so E2E can assert skin presence. */
html body::after {
  content: "sida-skin";
  display: none;
}

/* Hide Roundcube watermark/branding in topnav (subtle replacement). */
#topnav .button.user-menu .name::before {
  content: "SIDA · ";
  color: var(--sida-accent);
  font-weight: 700;
}

/* =====================================================================
 * Phase 44 Step 2 — SIDA branding cleanup + logo sizing (2026-07-03)
 * Appearance/branding only. No layout overhaul, no mail-logic impact.
 * ===================================================================== */

/* SIDA logo (skin_logo -> logo.svg). The SIDA mark is a tall portrait SVG,
   so constrain it: a tidy badge instead of a giant column. */
#logo,
img#logo,
.logo {
  max-height: 96px !important;
  width: auto !important;
  object-fit: contain;
}
body.task-login #logo {
  max-height: 120px !important;
  margin-bottom: 18px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25));
}

/* Hide leftover Roundcube wordmark/branding. product_name already switched
   the <title> + login footer to "SIDA"; the About page still hardcodes the
   Roundcube name, copyright and license lines — hide them. */
.sysname,
h2.sysname,
p.copyright,
p.license,
.about .copyright,
.about .license,
#aboutframe .sysname,
#aboutframe .copyright,
#aboutframe .license,
#aboutframe a[href*="roundcube.net"],
a[href*="roundcube.net"] {
  display: none !important;
}

/* Login footer now renders "SIDA" (product_name) — keep it subtle + on brand. */
body.task-login #login-footer,
#login-footer {
  color: var(--sida-text-on-light) !important;
  opacity: 0.78;
  font-weight: 600;
}
body.task-login #login-footer a.support-link {
  color: var(--sida-primary) !important;
}

/* Login card polish. */
body.task-login #login-form label {
  color: var(--sida-text-on-light) !important;
  font-weight: 600;
}
body.task-login #login-form .button.mainaction {
  width: 100%;
  margin-top: 8px;
}

/* =====================================================================
 * Missing panel selectors (Elastic desktop) — make sure SIDA surfaces
 * reach the reading pane and compose view. Colors/surfaces only; the
 * Elastic grid/rows/columns are left untouched.
 * ===================================================================== */

/* Reading pane + compose surfaces -> white-glass, dark readable text. */
#messageview,
.mail-view,
#message-content,
#compose-content,
.compose-content,
#composeview-content,
#preview-frame,
.preview-pane {
  background: var(--sida-glass-strong) !important;
  color: var(--sida-text-on-light) !important;
  border-radius: var(--sida-radius);
}

/* Message subject / header rows in the reading pane on light glass. */
#messageheader,
.messageheaderrow,
.message-partheaders,
.message-headers,
.subject {
  color: var(--sida-text-on-light) !important;
}

/* Folder unread counters -> SIDA accent badge. */
#mailboxlist li a .unreadcount,
.treelist li a .unreadcount,
.folderlist li a .unreadcount {
  background: var(--sida-accent) !important;
  color: #ffffff !important;
  border-radius: 10px;
}