/* Tema Chronyx Domains para o skin Elastic — navy + dourado, fonte Inter.
   Sobreposto por cima do CSS original do skin (nao altera os .less do Roundcube). */

@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("../fonts/Inter.woff2") format("woff2"); }
@font-face { font-family:"Orbitron"; font-style:normal; font-weight:400 900; font-display:swap; src:url("../fonts/Orbitron.woff2") format("woff2"); }

:root {
  --cx-navy:#0a0e1a; --cx-navy-deep:#050810; --cx-navy-hover:#11182b;
  --cx-gold:#c8a24c; --cx-gold-light:#d9b96a; --cx-gold-dark:#9c7e36; --cx-gold-tint:#c8a24c1a;
  --cx-bg:#fafaf9; --cx-surface:#ffffff; --cx-surface-2:#f5f4f2;
  --cx-border:#eaeae7; --cx-muted:#626a7d; --cx-radius:.7rem; --cx-radius-sm:.5rem;
  --cx-shadow:0 1px 2px rgba(10,14,26,.05), 0 12px 32px rgba(10,14,26,.08);
}

/* ---------- Tipografia base ---------- */
body, button, input, optgroup, select, textarea, .popover {
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
}
a { color:var(--cx-gold-dark); }
a:hover { color:var(--cx-gold); }
::selection { background:var(--cx-gold-tint); }
html { scrollbar-color:#c9beac var(--cx-surface-2); }
html:not(.touch) ::-webkit-scrollbar-thumb { background-color:#c9beac; }
html:not(.touch) ::-webkit-scrollbar-track { background-color:var(--cx-surface-2); }

/* ---------- Menu de tarefas (barra lateral fina) ---------- */
#layout-menu, #layout-menu .popover-header {
  background-color:var(--cx-navy-deep);
}
#taskmenu a { color:#c4cad6; }
#taskmenu a:hover { background-color:var(--cx-navy-hover); color:#fff; }
#taskmenu a.selected { background-color:var(--cx-gold-tint); color:#fff; box-shadow:inset 3px 0 0 var(--cx-gold); }
#taskmenu .action-buttons a { color:var(--cx-gold); }
#taskmenu .action-buttons a:hover { background-color:var(--cx-navy-hover); color:var(--cx-gold-light); }
#taskmenu a.logout:hover { background-color:#3a1414; }

/* ---------- Cabecalhos/rodapes dos paineis ---------- */
#layout > div > .header {
  background-color:var(--cx-surface);
  border-bottom-color:var(--cx-border);
}
#layout > div > .footer {
  background-color:var(--cx-surface);
  border-top-color:var(--cx-border);
}
#layout-sidebar { border-right-color:var(--cx-border); }
#layout-list { border-right-color:var(--cx-border); }

/* ---------- Listas (pastas e mensagens) ---------- */
.listing li.selected, .listing tr.selected {
  box-shadow:inset 3px 0 0 var(--cx-gold);
}
.listing li.selected, .listing tr.selected td {
  background-color:var(--cx-gold-tint);
}
.listing li:not(.selected):hover, .listing tr:not(.selected):hover {
  background-color:var(--cx-surface-2);
}

/* ---------- Botoes ---------- */
.button.mainaction, button.btn-primary {
  background-color:var(--cx-navy);
  border-color:var(--cx-navy);
  border-radius:999px;
  color:#fff;
}
.button.mainaction:hover, button.btn-primary:hover {
  background-color:var(--cx-navy-hover);
  border-color:var(--cx-navy-hover);
}
.btn, button.btn-secondary {
  border-radius:999px;
}
[data-fab="true"] {
  background-color:var(--cx-gold) !important;
  border-color:var(--cx-gold) !important;
}
[data-fab="true"]:hover { background-color:var(--cx-gold-dark) !important; }

/* ---------- Formularios ---------- */
input.form-control, select.form-control, textarea.form-control, .form-control {
  border-radius:var(--cx-radius-sm);
}
input.form-control:focus, select.form-control:focus, textarea.form-control:focus, .form-control:focus {
  border-color:var(--cx-gold-dark);
  box-shadow:0 0 0 .2rem var(--cx-gold-tint);
}
input[type="checkbox"], input[type="radio"] { accent-color:var(--cx-gold-dark); }

/* ---------- Destaques (quota, badges, contadores) ---------- */
.quota-widget .count { color:var(--cx-gold-dark); }
.listing tr.unread td.subject span.subject { color:var(--cx-navy); }
.badge, .folderlist .unreadcount {
  background-color:var(--cx-gold);
}

/* ---------- Popovers e dialogos ---------- */
.popover, .ui-dialog, .popupmenu { border-radius:var(--cx-radius); }
.popover-header, .ui-dialog-titlebar { border-bottom-color:var(--cx-border); }

/* ---------- Tela de login ---------- */
body.task-login {
  background:radial-gradient(1200px 600px at 70% -10%, #11182b, transparent 60%),
             linear-gradient(160deg, #050810, #0a0e1a 60%, #0d1322);
}
body.task-login #layout-content {
  align-items:center;
  justify-content:center;
  padding:24px;
  background-color:transparent;
}
body.task-login #logo { display:block; margin:0 auto 8px; max-height:48px; }
body.task-login #login-form {
  width:min(380px, 100%);
  background:var(--cx-surface);
  border:1px solid var(--cx-border);
  border-radius:var(--cx-radius);
  box-shadow:var(--cx-shadow);
  padding:32px 30px;
}
body.task-login #login-form table { width:100%; }
body.task-login #login-form td.title label {
  font-weight:600;
  font-size:.88rem;
}
body.task-login #login-form td.input { padding-bottom:14px; }
body.task-login .formbuttons { text-align:center; margin-top:6px; }
body.task-login .formbuttons .button.mainaction { width:100%; padding:11px; font-weight:600; }
body.task-login #login-footer { text-align:center; color:var(--cx-muted); font-size:.82rem; margin-top:16px; }

/* Modo escuro do Roundcube: o skin adiciona classes bootstrap (.btn-primary) via JS
   com especificidade maior que a nossa base, entao repetimos o escopo com html.dark-mode. */
html.dark-mode .button.mainaction, html.dark-mode .btn-primary {
  background-color:var(--cx-navy);
  border-color:var(--cx-navy);
}
html.dark-mode .button.mainaction:hover, html.dark-mode .btn-primary:hover {
  background-color:var(--cx-navy-hover);
  border-color:var(--cx-navy-hover);
}
html.dark-mode body.task-login #login-form {
  background-color:#12172a;
  border-color:#232a42;
}
html.dark-mode body.task-login #login-form td.title label { color:#c4cad6; }
html.dark-mode body.task-login #login-footer { color:#8a91a3; }