/* =====================================================================
   JMDC Mail — Roundcube (tema jmdc sobre o Elastic) · Padrão-Ouro
   As cores base vêm do styles.css recompilado; aqui ficam tipografia,
   efeitos e a tela de login.
   ===================================================================== */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --coal: #11100F; --coal-2: #161412; --obsidian: #211913; --obsidian-2: #2a2019;
  --bronze: #65452F; --copper: #C18A55; --copper-hi: #D9A673; --mineral: #D9D0C5; --ivory: #F5F1EB;
  --line: rgba(193, 138, 85, .16); --line-2: rgba(193, 138, 85, .32);
  --muted: rgba(217, 208, 197, .66); --dim: rgba(217, 208, 197, .42);
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --radius: .25rem; --radius-lg: .625rem;
}

/* ---------- tipografia ---------- */
html.jmdc body, html.jmdc input, html.jmdc select, html.jmdc textarea, html.jmdc button,
html.jmdc .popover, html.jmdc .ui-dialog, html.jmdc .btn, html.jmdc .form-control {
  font-family: var(--f-display);
}
html.jmdc body { background: var(--coal); color: var(--mineral); -webkit-font-smoothing: antialiased; }
html.jmdc ::selection { background: var(--copper); color: var(--coal); }
html.jmdc .header-title, html.jmdc .header .header-title { color: var(--ivory); font-weight: 600; letter-spacing: -.01em; }
.jm-mono { font-family: var(--f-mono); font-size: .92em; }

/* grão sutil (só na janela principal) */
html.jmdc:not(.iframe) body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10000; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- menu de tarefas (coluna esquerda) ---------- */
html.jmdc #layout-menu { background: #0c0b0a; border-right: 1px solid var(--line); }
html.jmdc #layout-menu #logo { max-height: 2.4rem; object-fit: contain; padding: .2rem .4rem; }
html.jmdc #taskmenu a { position: relative; transition: color .25s, background .25s; }
html.jmdc #taskmenu a.selected { box-shadow: inset 3px 0 0 var(--copper-hi); }
html.jmdc #taskmenu a:not(.selected):hover::before { color: var(--copper); }
html.jmdc #taskmenu a.logout:hover { color: #E0685A; }

/* ---------- cabeçalhos, barras e listas ---------- */
html.jmdc #layout-sidebar > .header, html.jmdc #layout-list > .header, html.jmdc #layout-content > .header {
  border-bottom: 1px solid var(--line);
}
html.jmdc .toolbar a.button, html.jmdc .toolbar a.button:before { transition: color .2s, transform .3s var(--ease); }
html.jmdc .toolbar a.button:not(.disabled):hover { color: var(--copper-hi); }
html.jmdc .toolbar a.button:not(.disabled):hover:before { transform: translateY(-2px); color: var(--copper); }

html.jmdc #folderlist-content li a, html.jmdc .listing li a { transition: background .2s, color .2s; }
html.jmdc .listing li.selected > a, html.jmdc #folderlist-content li.selected > a { box-shadow: inset 3px 0 0 var(--copper); color: var(--ivory); }
html.jmdc .listing li .unreadcount, html.jmdc #folderlist-content li .unreadcount { background: var(--copper); color: var(--coal); font-weight: 700; }

html.jmdc table.messagelist tr { transition: background .2s; }
html.jmdc table.messagelist tr:hover td { background: rgba(193, 138, 85, .05); }
html.jmdc table.messagelist tr.selected td:first-child, html.jmdc table.messagelist tr.focused td:first-child { box-shadow: inset 3px 0 0 var(--copper); }
html.jmdc table.messagelist tr.unread td span.subject a, html.jmdc table.messagelist tr.unread .subject { color: var(--ivory); }
html.jmdc table.messagelist tr.unread td.subject span.fromto { color: var(--copper-hi); }
html.jmdc table.messagelist td.subject span.date, html.jmdc table.messagelist td span.size { font-family: var(--f-mono); font-size: .78rem; }

/* busca */
html.jmdc .searchbar input, html.jmdc .searchbar .form-control { border-radius: var(--radius); }

/* cota (rodapé da lista de pastas) */
html.jmdc .quota-widget { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; }
html.jmdc .quota-widget .bar { border-radius: 99px; overflow: hidden; }
html.jmdc .quota-widget .bar .value { background: linear-gradient(90deg, var(--bronze), var(--copper)); }

/* ---------- botões ---------- */
html.jmdc .btn { border-radius: var(--radius); font-weight: 600; letter-spacing: .01em; transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s; }
html.jmdc .btn-primary, html.jmdc .btn.mainaction, html.jmdc button.mainaction, html.jmdc .floating-action-buttons a.button {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--copper) !important; border-color: var(--copper) !important; color: var(--coal) !important;
}
html.jmdc .btn-primary::after, html.jmdc .btn.mainaction::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 240, 220, .45) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
html.jmdc .btn-primary:hover::after, html.jmdc .btn.mainaction:hover::after { transform: translateX(120%); }
html.jmdc .btn-primary:hover, html.jmdc .btn.mainaction:hover {
  background: var(--copper-hi) !important; border-color: var(--copper-hi) !important;
  transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(193, 138, 85, .8);
}
html.jmdc .btn-secondary { background: transparent !important; border-color: var(--line-2) !important; color: var(--ivory) !important; }
html.jmdc .btn-secondary:hover { border-color: var(--copper) !important; color: var(--copper-hi) !important; background: rgba(193, 138, 85, .08) !important; }
html.jmdc .btn-danger { background: transparent !important; border-color: rgba(224, 104, 90, .5) !important; color: #E0685A !important; }
html.jmdc .btn-danger:hover { background: #E0685A !important; color: var(--coal) !important; }

/* campos */
html.jmdc .form-control:focus, html.jmdc input:focus, html.jmdc select:focus, html.jmdc textarea:focus { box-shadow: 0 0 0 3px rgba(193, 138, 85, .18) !important; }

/* menus suspensos e diálogos */
html.jmdc .popover { border-radius: var(--radius-lg); box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .9); }
html.jmdc .popover .listing li a:hover, html.jmdc .popover a.active:hover { background: rgba(193, 138, 85, .1); color: var(--ivory); }
html.jmdc .ui-dialog { border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: 0 2rem 4rem -2rem #000; }
html.jmdc .ui-dialog .ui-dialog-titlebar { border-bottom: 1px solid var(--line); }
html.jmdc .ui-dialog .ui-dialog-title { color: var(--ivory); font-weight: 600; }

/* mensagens do sistema (toasts) */
html.jmdc #messagestack div { border-radius: var(--radius-lg); border-left: 3px solid var(--copper); box-shadow: 0 1rem 2rem -1rem #000; }

/* animação de entrada */
@keyframes jm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.jmdc:not(.iframe) #layout-sidebar, html.jmdc:not(.iframe) #layout-list { animation: jm-rise .5s var(--ease) both; }
html.jmdc:not(.iframe) #layout-list { animation-delay: .06s; }

/* ---------- ícones usados nas telas próprias (fonte Icons do Elastic = Font Awesome 5) ---------- */
.jm-i::before { font-family: 'Icons'; font-weight: 900; font-style: normal; display: inline-block; }
.jm-i--shield::before { content: "\f3ed"; }
.jm-i--phone::before  { content: "\f3cd"; }
.jm-i--help::before   { content: "\f059"; }
.jm-i--mail::before   { content: "\f2b6"; }
.jm-i--fwd::before    { content: "\f064"; }

/* =====================================================================
   LOGIN DO WEBMAIL
   ===================================================================== */
html.jmdc body.task-login { background: var(--coal); overflow-y: auto; }
html.jmdc body.task-login #layout { display: block; height: auto; min-height: 100vh; }
.jm-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(48rem 32rem at 78% 30%, rgba(193, 138, 85, .17), transparent 62%),
    radial-gradient(36rem 26rem at 8% 90%, rgba(101, 69, 47, .3), transparent 60%),
    linear-gradient(rgba(193, 138, 85, .045) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgba(193, 138, 85, .045) 1px, transparent 1px) 0 0 / 64px 100%;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%);
}
html.jmdc body.task-login #layout-content.jm-login {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh;
  width: 100%; max-width: none; margin: 0; padding: 0; text-align: left; background: transparent; overflow: visible;
}
.jm-login a { color: var(--copper-hi); text-decoration: none; }
.jm-login a:hover { color: var(--ivory); }
.jm-lnav { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 32px; box-sizing: border-box; }
.jm-brand { display: inline-flex; align-items: center; gap: 14px; }
.jm-brand__logo { height: 30px; width: auto; display: block; }
.jm-brand__sep { width: 1px; height: 26px; background: var(--line-2); }
.jm-brand__title { color: var(--copper); font: 500 13px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; }

.jm-lgrid {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 64px; align-items: center;
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 32px 56px; box-sizing: border-box;
}
.jm-hello { animation: jm-rise .8s var(--ease) both; }
.jm-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--copper); }
.jm-eyebrow__dot { width: 6px; height: 6px; background: var(--copper); box-shadow: 0 0 0 4px rgba(193, 138, 85, .14); animation: jm-pulse 2.4s ease-in-out infinite; }
@keyframes jm-pulse { 50% { box-shadow: 0 0 0 7px rgba(193, 138, 85, .04); } }
.jm-hello__title { color: var(--ivory); font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; font-weight: 750; font-stretch: 112%; letter-spacing: -.03em; margin: 18px 0; }
.jm-hello__title em { font-style: normal; color: var(--copper); position: relative; }
.jm-hello__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .08em; background: var(--copper); opacity: .45; transform-origin: left; animation: jm-under 1.2s var(--ease) .5s both; }
@keyframes jm-under { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jm-hello__lead { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 34rem; margin: 0 0 30px; }
.jm-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 34rem; }
.jm-tips li { display: flex; gap: 14px; align-items: flex-start; animation: jm-rise .7s var(--ease) both; }
.jm-tips li:nth-child(2) { animation-delay: .1s; } .jm-tips li:nth-child(3) { animation-delay: .2s; }
.jm-tips__ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--copper); transition: all .3s var(--ease); }
.jm-tips li:hover .jm-tips__ico { background: var(--copper); color: var(--coal); }
.jm-tips strong { display: block; color: var(--ivory); font-weight: 600; font-size: 14.5px; }
.jm-tips span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }

.jm-access { animation: jm-rise .8s var(--ease) .15s both; }
.jm-card {
  position: relative; padding: 30px; border-radius: 14px; background: rgba(27, 22, 18, .85);
  border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.jm-card::before { content: ""; position: absolute; left: 30px; right: 30px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--copper), transparent); }
.jm-card__head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.jm-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, var(--copper), var(--bronze)); color: var(--coal); font-size: 18px; flex: none; }
.jm-card__head h2 { color: var(--ivory); font-size: 20px; font-weight: 650; margin: 0; }
.jm-card__head p { color: var(--muted); font-size: 13px; margin: 2px 0 0; }

/* formulário do Roundcube (tabela gerada pelo objeto loginform) */
.jm-card #login-form { width: 100%; max-width: none; margin: 0; top: 0; position: static; }
.jm-card #login-form table, .jm-card #login-form tbody { display: block; width: 100%; }
.jm-card #login-form tr.form-group { display: block; margin: 0 0 14px; width: 100%; }
.jm-card #login-form td.title { display: none !important; }
.jm-card #login-form td.input { display: flex; flex-wrap: nowrap; width: 100%; padding: 0; text-align: left; }
.jm-card #login-form td.input input.form-control { flex: 1 1 auto; width: 1%; min-width: 0; }
.jm-card #login-form .input-group-text { background: transparent !important; border-color: var(--line-2) !important; color: var(--bronze) !important; min-width: 44px; justify-content: center; }
.jm-card #login-form input.form-control { height: 48px; font-size: 15px; background: rgba(13, 12, 11, .8) !important; border-color: var(--line-2) !important; color: var(--ivory) !important; }
.jm-card #login-form .input-group:focus-within .input-group-text { color: var(--copper) !important; border-color: var(--copper) !important; }
.jm-card #login-form .formbuttons { margin: 6px 0 0; }
.jm-card #rcmloginsubmit { height: 48px; font-size: 15px; text-transform: none; letter-spacing: .01em; width: 100%; }
.jm-access__help { text-align: center; color: var(--dim); font-size: 13px; margin-top: 16px; }

.jm-lfoot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px 32px 26px; box-sizing: border-box; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; position: static !important; text-align: left; }

@media (max-width: 980px) {
  .jm-lgrid { grid-template-columns: 1fr; gap: 32px; padding: 8px 16px 40px; }
  .jm-lnav, .jm-lfoot { padding-left: 16px; padding-right: 16px; }
  .jm-lnav { padding-top: 18px; padding-bottom: 18px; }
  .jm-brand__logo { height: 24px; }
  .jm-access { order: -1; }
  .jm-hello__lead { font-size: 15.5px; }
  .jm-card { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html.jmdc *, html.jmdc *::before, html.jmdc *::after { animation: none !important; transition: none !important; }
}

/* ---------- ajustes finos ---------- */
html.jmdc .recipient-input input, html.jmdc .recipient-input input:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.jmdc #taskmenu a .inner { font-size: .68rem; letter-spacing: -.01em; }
html.jmdc #compose-attachments .hint, html.jmdc .file-upload .hint { color: var(--dim); }