/* Tema Lintasena Express untuk skin Elastic (Roundcube).
   Warna brand: ubah variabel di bawah. Aturan warna otomatis ada di colors.css. */

:root {
  --lx-primary: #0b57d0;
  --lx-primary-hover: #0a4cb8;
  --lx-primary-dark: #0842a0;
  --lx-accent: #fbbc04;
  --lx-surface: #f6f8fc;      /* latar menu & sidebar */
  --lx-hover: #e9eef6;        /* hover item */
  --lx-selected: #d3e3fd;     /* folder / pesan terpilih */
  --lx-selected-text: #041e49;
  --lx-text: #1f1f1f;
  --lx-muted: #5f6368;
  --lx-line: #e3e8f0;
}

/* ---------------------------------------------------------------- umum */

html .btn { border-radius: 8px; }
html .btn-primary:hover,
html .btn-primary:focus,
html div.tox .tox-dialog__footer .tox-button:hover {
  background: var(--lx-primary-hover);
  border-color: var(--lx-primary-hover);
}
html .btn-primary:not(:disabled):not(.disabled):active,
html .btn-primary:not(:disabled):not(.disabled).active {
  background: var(--lx-primary-dark);
  border-color: var(--lx-primary-dark);
}
html .floating-action-buttons a.button { border-radius: 16px; }
html .ui-dialog { border-radius: 14px; overflow: hidden; }
html .popover { border-radius: 12px; }
html .form-control { border-radius: 8px; }
html .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---------------------------------------------------------------- tampilan ala Gmail (mode terang) */

@media screen and (min-width: 481px) {
  html:not(.dark-mode) #layout-menu,
  html:not(.dark-mode) #layout-menu .popover-header,
  html:not(.dark-mode) #taskmenu .special-buttons {
    background-color: var(--lx-surface) !important;
  }
  html:not(.dark-mode) #layout-menu { border-right: 1px solid var(--lx-line); }
  html:not(.dark-mode) #taskmenu a { color: #444746; }
  html:not(.dark-mode) #taskmenu a:hover,
  html:not(.dark-mode) #taskmenu a:focus { color: var(--lx-text); background: var(--lx-hover); }
  html:not(.dark-mode) #taskmenu a.selected,
  html:not(.dark-mode) #taskmenu a.selected:hover {
    color: var(--lx-selected-text);
    background: var(--lx-selected);
    box-shadow: inset 3px 0 0 var(--lx-primary);
  }
  html:not(.dark-mode) #taskmenu .action-buttons a { color: var(--lx-primary); font-weight: 600; }
  html:not(.dark-mode) #taskmenu .action-buttons a:hover { color: var(--lx-primary); background: var(--lx-hover); }
}

/* Sidebar folder */
html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-sidebar .header,
html:not(.dark-mode) #layout-sidebar .footer {
  background-color: var(--lx-surface);
}
html .folderlist li.mailbox { border-radius: 0 999px 999px 0; margin-right: .75rem; }
html .folderlist li.mailbox > a { border-radius: 0 999px 999px 0; }
html:not(.dark-mode) .folderlist li.mailbox > a:hover { background-color: var(--lx-hover); }
html:not(.dark-mode) .folderlist li.mailbox.selected > a { font-weight: 700; }
html .folderlist li.mailbox .unreadcount { border-radius: 999px; }

/* Item terpilih pada daftar (folder, pesan, kontak, pengaturan) */
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected td {
  color: var(--lx-selected-text);
  background-color: var(--lx-selected);
}

/* Daftar pesan */
html:not(.dark-mode) .messagelist tbody tr:not(.selected):hover td { background-color: #f2f6fc; }
html:not(.dark-mode) .messagelist tr.unread td.subject span.subject a,
html:not(.dark-mode) .messagelist tr.unread td.subject span.fromto { color: var(--lx-text); }

/* ---------------------------------------------------------------- halaman login */

.task-login #layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(251, 188, 4, .22), transparent 60%),
    radial-gradient(800px 600px at -10% 110%, rgba(168, 199, 250, .35), transparent 60%),
    linear-gradient(135deg, #0b57d0 0%, #0842a0 55%, #062e6f 100%);
}
.task-login #layout-content {
  flex: 0 1 420px;
  height: auto !important;
  min-height: 0;
  position: relative;
  padding: 40px 36px 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(6, 46, 111, .35);
  overflow: visible;
}
.task-login #logo {
  position: static;
  top: auto;
  display: block;
  width: 220px;
  max-width: 100%;
  max-height: none;
  margin: 0 auto 12px;
}
.task-login #login-form {
  top: auto;
  width: 100%;
  max-width: none;
}
.task-login .lx-subtitle {
  margin: 0 0 24px;
  color: var(--lx-muted);
  font-size: .95rem;
}
.task-login #login-form .input-group-lg > .form-control,
.task-login #login-form .input-group-lg .input-group-text {
  height: 50px;
  border-color: #dadce0;
}
.task-login #login-form .input-group-lg .input-group-text {
  border-radius: 10px 0 0 10px;
  background: #f8fafd;
  color: var(--lx-muted);
}
.task-login #login-form .input-group-lg > .form-control { border-radius: 0 10px 10px 0; font-size: 1rem; }
.task-login #login-form .form-control:focus { border-color: var(--lx-primary); }
.task-login #rcmloginsubmit {
  height: 50px;
  margin-top: 8px;
  border-radius: 10px;
  text-transform: none !important; /* tombol memakai class .text-uppercase (!important) */
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .2px;
}
.task-login #login-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eef0f3;
  color: var(--lx-muted);
  font-size: .82rem;
}

/* Pilihan bahasa */
.task-login .lx-lang-switch {
  display: inline-flex;
  margin-top: 20px;
  padding: 3px;
  border-radius: 999px;
  background: #eef2f8;
}
.task-login .lx-lang-switch a {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--lx-muted);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
}
.task-login .lx-lang-switch a:hover { color: var(--lx-text); }
.task-login .lx-lang-switch a.selected {
  background: #fff;
  color: var(--lx-primary);
  box-shadow: 0 1px 3px rgba(6, 46, 111, .18);
}
.task-login .lx-help {
  margin: 14px 0 0;
  color: var(--lx-muted);
  font-size: .82rem;
}
html.dark-mode .task-login .lx-lang-switch { background: #2a3036; }
html.dark-mode .task-login .lx-lang-switch a.selected { background: #3a4148; color: #a8c7fa; }
html.dark-mode .task-login .lx-lang-switch a:hover { color: #e3e6ea; }

/* Login dalam mode gelap */
html.dark-mode .task-login #layout-content { background: #1f2327; box-shadow: 0 24px 64px rgba(0, 0, 0, .5); }
html.dark-mode .task-login #logo { background: #fff; border-radius: 12px; padding: 10px 14px; }
html.dark-mode .task-login #login-form .input-group-lg .input-group-text { background: #2a3036; border-color: #3a4148; }
html.dark-mode .task-login #login-form .input-group-lg > .form-control { border-color: #3a4148; }
html.dark-mode .task-login #login-footer { border-top-color: #2e343b; color: #9aa4af; }

@media screen and (max-width: 480px) {
  .task-login #layout { padding: 12px; }
  .task-login #layout-content { padding: 28px 20px 20px; border-radius: 16px; }
}