/* dik-doek webmail skin — extends elastic.
 *
 * Strategy: inherit elastic's full stylesheet via @import, then re-tint the
 * most visible chrome to dik-doek's mint+terracotta palette so the webmail
 * reads as part of the brand. Palette mirrors clients/dik-doek/assets/styles.css
 * so the site and the webmail look like the same product.
 *
 * Elastic compiles its palette from LESS at build time (no CSS variables on
 * its own brand colors), so the overrides below target specific selectors
 * rather than tweaking a `:root` block. Add more as the rendered result
 * surfaces spots that still look like stock Roundcube.
 */

/* Elastic ships compiled CSS as styles.min.css — there is no plain styles.css,
 * so importing styles.css 404s and we lose the entire base layout. */
@import url('../../elastic/styles/styles.min.css');

:root {
  --dd-bg:            #FBF7F2;  /* warm cream */
  --dd-bg-alt:        #EAF4EE;  /* pale mint */
  --dd-text:          #2D2A26;
  --dd-accent:        #99D2B2;  /* logo mint */
  --dd-accent-dark:   #6FB390;
  --dd-accent-darker: #4E8970;
  --dd-warm:          #D29A8E;  /* terracotta */
  --dd-border:        #D9E8DF;
  --dd-chrome:        #3D6A56;  /* deep forest mint — task rail + chrome */
  --dd-chrome-hover:  #2F5343;  /* darker forest for hover/selected */
  --dd-chrome-fg:     #EAF4EE;  /* pale mint for chrome icons/text */
}

/* ── Login page ─────────────────────────────────────────────────────────── */
/* Elastic ships an SVG geometric pattern on the login backdrop — nuke it so
 * we land on the brand cream/mint instead of stock Roundcube blue shapes. */
html.layout-small.task-login,
html.layout-phone.task-login,
html.task-login,
body.task-login,
.task-login #layout,
.task-login #layout-content,
.task-login .layout-content,
.task-login .login-content {
  background-image: none !important;
  background: radial-gradient(circle at 30% 20%, var(--dd-bg-alt), var(--dd-bg) 70%) !important;
  color: var(--dd-text);
}

/* Card-style login container. Elastic flows logo + #login-form as siblings of
 * #layout-content with absolute-ish top offsets (16vh / 20vh). We collapse
 * those and wrap them visually with a card via a flex column. */
.task-login #layout-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* Brand mark — Roundcube renders <img id="logo"> from $config['skin_logo'].
 * Override elastic's max-height: 100px and top: 16vh so we can place it as
 * part of the card. */
.task-login #logo {
  position: static !important;
  top: auto !important;
  max-height: none !important;
  max-width: 140px;
  width: 100%;
  height: auto;
  margin: 0 0 1.5rem;
  display: block;
}

/* The form itself: card with shadow, rounded corners, comfortable padding. */
.task-login #login-form {
  position: static !important;
  top: auto !important;
  margin: 0 auto !important;
  width: 100%;
  max-width: 380px;
  background-color: var(--dd-bg);
  border: 1px solid var(--dd-border);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  box-shadow: 0 24px 48px -16px rgba(78, 137, 112, 0.25),
              0 4px 12px -2px rgba(45, 42, 38, 0.08);
  box-sizing: border-box;
}

/* Login form fields are rendered as <table cols=2>: label-cell + input-cell.
 * Re-flow the rows so labels sit above inputs (modern stacked look) instead
 * of side-by-side. */
.task-login #login-form table,
.task-login #login-form tbody,
.task-login #login-form tr {
  display: block;
  width: 100%;
}
.task-login #login-form tr {
  margin-bottom: 1rem;
}
.task-login #login-form td {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
}
.task-login #login-form td.title {
  margin-bottom: 0.35rem;
}
.task-login #login-form td.title label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dd-accent-darker);
  text-transform: uppercase;
  margin: 0;
}
.task-login #login-form input.form-control {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--dd-border);
  background: #fff;
  font-size: 1rem;
}

/* Submit button: full-width, prominent. */
.task-login #login-form .formbuttons {
  margin: 1.25rem 0 0;
}
.task-login #login-form #rcmloginsubmit {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  letter-spacing: 0.03em;
}

/* Login footer (product name / version) sits under the card. */
.task-login #login-footer {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  opacity: 0.65;
  text-align: center;
}

/* ── Primary buttons (login submit, save, send, etc.) ───────────────────── */
.btn.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
.formbuttons button.mainaction,
button.mainaction {
  background-color: var(--dd-accent-dark);
  border-color: var(--dd-accent-dark);
  color: #fff;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
button.mainaction:hover,
button.mainaction:focus {
  background-color: var(--dd-accent-darker);
  border-color: var(--dd-accent-darker);
  color: #fff;
}

/* ── Links ──────────────────────────────────────────────────────────────── */
a,
a:visited { color: var(--dd-accent-darker); }
a:hover   { color: var(--dd-accent-dark); }

/* ── Input focus ring ───────────────────────────────────────────────────── */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--dd-accent-dark);
  box-shadow: 0 0 0 3px rgba(153, 210, 178, 0.35);
  outline: none;
}

/* ── Logged-in header accent strip ──────────────────────────────────────── */
.layout-header,
#layout-content > .header {
  border-bottom: 2px solid var(--dd-accent);
}

/* ── Selected items (folders, message list rows) ────────────────────────── */
.listing li.selected,
.listing tr.selected,
.list-widget .listing li.selected,
table.listing tbody tr.selected td {
  background-color: var(--dd-bg-alt);
  color: var(--dd-text);
  border-left: 3px solid var(--dd-accent-dark);
}

/* ── Unread / badge accent uses the warm complementary ──────────────────── */
.unread-count,
.badge.badge-primary,
.badge-unread {
  background-color: var(--dd-warm);
  color: #fff;
}

/* ── Logged-in chrome: task rail + top toolbar ──────────────────────────── */
/* Elastic's chrome is dark slate (#2f3a3f) with cyan-blue (#37beff) action
 * icons. Re-tint the rail to deep forest mint with pale-mint icons so it
 * reads as part of the brand instead of stock Roundcube. */
#layout-menu,
#taskmenu .special-buttons {
  background-color: var(--dd-chrome) !important;
}
#taskmenu a:hover,
#taskmenu a:focus,
#taskmenu a.selected,
#taskmenu a.selected:hover,
#taskmenu .action-buttons a:hover {
  background-color: var(--dd-chrome-hover) !important;
  color: var(--dd-chrome-fg) !important;
}
#taskmenu a {
  color: var(--dd-chrome-fg);
}
/* Action buttons sit at the bottom of the rail (compose, settings, logout) —
 * elastic colors them in cyan-blue; cream-mint reads as brand. */
#taskmenu .action-buttons a {
  color: var(--dd-chrome-fg) !important;
}

/* Top header / toolbar above the message list — was #f4f4f4 light gray. */
#layout > div > .header {
  background-color: var(--dd-bg) !important;
  border-bottom: 1px solid var(--dd-border);
}

/* Quota widget (folder list footer) — elastic shows a cyan-blue fill bar. */
.quota-widget .value {
  background-color: var(--dd-accent) !important;
}

/* Popup menu hover (folder-options, list-options, etc.) — was cyan-blue. */
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover {
  background-color: var(--dd-accent-dark) !important;
  color: #fff !important;
}

/* Floating action button (mobile compose) — was cyan-blue. */
.floating-action-buttons a.button {
  background: var(--dd-accent-dark) !important;
  box-shadow: 0 0 5px 5px var(--dd-bg-alt) !important;
}

/* Datepicker / jQuery UI active states. */
.ui-datepicker a.ui-state-active,
.ui-menu .ui-state-active {
  background: var(--dd-accent-dark) !important;
  border-color: var(--dd-accent-dark) !important;
  color: #fff !important;
}
.ui-datepicker.ui-widget-content .ui-state-highlight {
  background: var(--dd-bg-alt) !important;
  color: var(--dd-accent-darker) !important;
}

/* Blockquote in messages — elastic uses a navy stripe; switch to mint. */
.message-htmlpart blockquote,
.message-part blockquote {
  color: var(--dd-accent-darker) !important;
  border-left-color: var(--dd-accent-dark) !important;
  border-right-color: var(--dd-accent-dark) !important;
}