/* Brown Forces — obsidian-with-depth skin over Roundcube Elastic.
   Imports Elastic, then layers gradients, elevation, gold/jade accents. */
@import url("../../elastic/styles/styles.min.css");

:root{
  --bf-bg:#0e0d0b; --bf-bone:#f3ece0; --bf-bone-dim:#b9b09e;
  --bf-gold:#c9a84c; --bf-gold-soft:#d8c07f; --bf-jade:#2f7a5a; --bf-jade-dk:#1f5640;
  --bf-line:rgba(201,168,76,.16); --bf-line-soft:rgba(245,240,232,.07);
  --bf-panel:linear-gradient(168deg,#1a1710 0%,#121009 60%,#0d0c08 100%);
  --bf-elev:0 14px 34px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- base: layered obsidian, never flat ---- */
html, body, #layout, .minwidth{
  background:radial-gradient(130% 90% at 50% -15%, #211c12 0%, #14110b 48%, #0a0907 100%) !important;
  color:var(--bf-bone) !important;
}
body, .minwidth{ background-attachment:fixed !important; }

/* greca hairline accent strip under the top bars */
#layout-menu, #layout-sidebar, #layout-list, #layout-content{
  background:var(--bf-panel) !important;
  color:var(--bf-bone) !important;
  border-color:var(--bf-line) !important;
  box-shadow:var(--bf-elev) !important;
}
#layout-sidebar, #layout-list{ border-right:1px solid var(--bf-line) !important; }

/* top app bar / toolbars / headers — elevated obsidian + gold underline */
.toolbar, .header, .boxtitle, #topnav, .pagenav, ul.toolbar{
  background:linear-gradient(180deg,#1d1910,#15120b) !important;
  color:var(--bf-bone) !important;
  border-bottom:1px solid var(--bf-line) !important;
  box-shadow:0 6px 18px -14px #000 !important;
}

/* the left task/menu rail */
#layout-menu, #taskmenu{ background:linear-gradient(180deg,#15120b,#0c0b07) !important; }
#taskmenu a, #layout-menu a{ color:var(--bf-bone-dim) !important; }
#taskmenu a:hover, #taskmenu a.selected, #layout-menu a:hover{
  color:var(--bf-gold) !important; background:rgba(201,168,76,.08) !important;
}

/* folder list + message list rows */
.listing li, .listing tr, table.messagelist tr, #folderlist li{
  border-color:var(--bf-line-soft) !important; color:var(--bf-bone) !important; background:transparent !important;
}
.listing li:hover, .listing tr:hover, table.messagelist tbody tr:hover{
  background:rgba(201,168,76,.07) !important;
}
.listing li.selected, .listing tr.selected, table.messagelist tr.selected td{
  background:linear-gradient(90deg,rgba(47,122,90,.28),rgba(47,122,90,.10)) !important;
  color:#fff !important;
}
.listing .unread, table.messagelist tr.unread{ color:#fff !important; font-weight:600 !important; }
.subject, .fromto, .date, .size, td{ color:var(--bf-bone) !important; }

/* links + accents */
a, .filename a, .rcmContactName{ color:var(--bf-gold-soft) !important; }
a:hover{ color:var(--bf-gold) !important; }

/* primary buttons → jade with depth; secondary → outlined gold */
.btn-primary, button.btn.primary, .formbuttons .btn.mainaction, a.button.btn-primary{
  background:linear-gradient(180deg,var(--bf-jade),var(--bf-jade-dk)) !important;
  border:1px solid var(--bf-jade-dk) !important; color:#fff !important;
  box-shadow:0 10px 22px -12px rgba(47,122,90,.7), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.btn-secondary, .btn.btn-secondary, a.button{ color:var(--bf-gold) !important; border-color:var(--bf-line) !important; background:rgba(255,255,255,.02) !important; }

/* inputs */
input, textarea, select, .form-control{
  background:#0c0b07 !important; color:var(--bf-bone) !important; border:1px solid var(--bf-line) !important;
}
input:focus, textarea:focus, .form-control:focus{ border-color:var(--bf-gold) !important; box-shadow:0 0 0 2px rgba(201,168,76,.18) !important; }

/* message preview / content area */
#messagecontent, .messageheaderbox, .message-part, .rcmbody, #composeview, .formcontent{
  background:linear-gradient(168deg,#16140e,#100e09) !important; color:var(--bf-bone) !important;
}

/* ---- LOGIN PAGE — branded, elevated card ---- */
body.task-login, .task-login #layout, .task-login .minwidth{
  background:radial-gradient(120% 90% at 50% 0%, #241d10 0%, #14110b 50%, #080705 100%) !important;
}
.task-login #layout-content, .task-login .formcontainer, #login-form{
  background:linear-gradient(165deg,#1c1810,#100e09) !important;
  border:1px solid var(--bf-line) !important; border-radius:18px !important;
  box-shadow:0 40px 90px -40px #000, inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.task-login .boxtitle, #login-form .boxtitle{ color:var(--bf-gold) !important; border:0 !important; background:transparent !important; }
/* gold greca top-accent on the login card */
.task-login #login-form:before{
  content:""; display:block; height:5px; border-radius:18px 18px 0 0;
  background:repeating-linear-gradient(135deg,var(--bf-gold) 0 10px,var(--bf-jade) 10px 20px,#a0522d 20px 30px);
  margin:-1px -1px 18px;
}
.task-login .product-name, #login-form .product-name{
  color:var(--bf-bone) !important; font-weight:700 !important; letter-spacing:.02em;
}

/* scrollbars + misc depth */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(201,168,76,.25); border-radius:6px; }
::-webkit-scrollbar-track{ background:#0c0b07; }
.popupmenu, .popover, .ui-dialog, .boxcontent{
  background:linear-gradient(168deg,#1a1710,#100e09) !important; color:var(--bf-bone) !important;
  border:1px solid var(--bf-line) !important; box-shadow:var(--bf-elev) !important;
}

/* ============================================================
   READABILITY FIX — the message reading + compose panes must be
   LIGHT so email text (and dark-on-light HTML email) is legible.
   Only the app chrome stays obsidian. (Overrides earlier dark body rule.)
   ============================================================ */
#messagecontent, .messageview, .message-part, .rcmbody, .message-htmlpart,
.message-part div, .message-part p, .message-part span, .message-part td,
.message-part li, .messagebody, #messagebody, #messagecontframe{
  background:#f7f3ec !important; color:#16130d !important;
}
.message-part, .message-htmlpart{ border-radius:12px !important; padding:6px 10px !important; }
.message-part a, .rcmbody a, #messagebody a{ color:#1f5640 !important; }
/* HTML emails render in an iframe — sit it on white */
iframe.message-part, .message-htmlpart iframe, #messagecontframe{ background:#ffffff !important; }
/* compose / reply area readable too */
#composebodycontainer, textarea.mce_editor, .mce-content-body, div.mce-edit-area,
#composebody, textarea#composebody{ background:#f7f3ec !important; color:#16130d !important; }
/* message header block: keep readable bone-on-dark (NOT the body) */
.messageheaderbox, .message-headers{ background:linear-gradient(168deg,#1a1710,#100e09) !important; color:var(--bf-bone) !important; }