/* ============================================================
   Noirport Webmail skin — turunan dari Elastic.
   Memuat CSS Elastic, lalu menimpanya dengan palet & tipografi
   situs utama Noirport (noir near-black navy + aksen biru).
   Aman terhadap update Roundcube: file asli Elastic tidak disentuh.
   ============================================================ */
@import url("../../elastic/styles/styles.css");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --np-bg-1: #070b15;   /* latar paling gelap */
  --np-bg-2: #04060d;
  --np-surface: #0d1526; /* panel/kolom */
  --np-surface-2: #111c31;
  --np-line: rgba(255, 255, 255, 0.10);
  --np-line-strong: rgba(255, 255, 255, 0.18);
  --np-text: #f8fafc;
  --np-muted: rgba(248, 250, 252, 0.66);
  --np-dim: rgba(248, 250, 252, 0.42);
  --np-blue: #2563eb;
  --np-blue-2: #3b82f6;
  --np-blue-soft: #60a5fa;
  --np-font-head: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --np-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Dasar ---------- */
html, body,
html.dark-mode, html.dark-mode body {
  background-color: var(--np-bg-2) !important;
  color: var(--np-text) !important;
  font-family: var(--np-font-body) !important;
}
h1, h2, h3, h4, .header-title, #layout-content .header .header-title {
  font-family: var(--np-font-head) !important;
  letter-spacing: -0.01em;
}
a { color: var(--np-blue-soft); }
a:hover { color: #93c5fd; }

/* ---------- Kolom / panel utama ---------- */
#layout, #layout > div,
#layout-menu, #layout-sidebar, #layout-list, #layout-content,
html.dark-mode #layout-menu, html.dark-mode #layout-sidebar,
html.dark-mode #layout-list, html.dark-mode #layout-content {
  background-color: var(--np-bg-1) !important;
  border-color: var(--np-line) !important;
  color: var(--np-text) !important;
}
#layout-sidebar, #layout-list { background-color: var(--np-surface) !important; }

/* ---------- Task menu (navigasi kiri) ---------- */
#layout-menu, #taskmenu,
html.dark-mode #layout-menu, html.dark-mode #taskmenu {
  background: linear-gradient(180deg, #0a1020, #05070f) !important;
  border-right: 1px solid var(--np-line) !important;
}
#taskmenu a, html.dark-mode #taskmenu a {
  color: var(--np-muted) !important;
  background: transparent !important;
  border-radius: 10px;
  margin: 2px 6px;
  transition: background .15s ease, color .15s ease;
}
#taskmenu a:hover, html.dark-mode #taskmenu a:hover {
  color: var(--np-text) !important;
  background: rgba(59, 130, 246, 0.14) !important;
}
#taskmenu a.selected, html.dark-mode #taskmenu a.selected {
  color: #fff !important;
  background: linear-gradient(135deg, var(--np-blue), var(--np-blue-2)) !important;
}
#taskmenu a.logout:hover, html.dark-mode #taskmenu a.logout:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}

/* ---------- Header / toolbar ---------- */
.header, #layout-content .header, #layout-list .header, #layout-sidebar .header,
html.dark-mode .header {
  background: var(--np-surface-2) !important;
  border-bottom: 1px solid var(--np-line) !important;
  color: var(--np-text) !important;
}
.toolbar, html.dark-mode .toolbar { background: transparent !important; }
.toolbar a.button, .header a.button, html.dark-mode .toolbar a.button {
  color: var(--np-muted) !important;
}
.toolbar a.button:hover, .header a.button:hover { color: var(--np-blue-soft) !important; }

/* ---------- Daftar folder & pesan ---------- */
.listing li, .listing tr, table.listing td,
html.dark-mode .listing li, html.dark-mode .listing tr {
  background-color: transparent !important;
  border-color: var(--np-line) !important;
  color: var(--np-text) !important;
}
.listing li:hover, .listing tr:hover,
html.dark-mode .listing li:hover, html.dark-mode .listing tr:hover {
  background-color: rgba(59, 130, 246, 0.10) !important;
}
.listing li.selected, .listing tr.selected, .listing li.selected > a,
html.dark-mode .listing li.selected, html.dark-mode .listing tr.selected {
  background-color: rgba(37, 99, 235, 0.24) !important;
  color: #fff !important;
}
.listing li.unread, .listing tr.unread { font-weight: 700; }
.messagelist .subject, .messagelist .fromto { color: var(--np-text) !important; }
.messagelist .date, .messagelist .size { color: var(--np-dim) !important; }

/* ---------- Tombol ---------- */
.btn-primary, a.btn-primary, button.btn-primary,
html.dark-mode .btn-primary {
  background: linear-gradient(135deg, var(--np-blue), var(--np-blue-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700;
}
.btn-primary:hover, html.dark-mode .btn-primary:hover { filter: brightness(1.08); }
.btn-secondary, button.btn-secondary, html.dark-mode .btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--np-line-strong) !important;
  color: var(--np-text) !important;
}

/* ---------- Form ---------- */
input, select, textarea,
input.form-control, select.form-control, textarea.form-control,
html.dark-mode input.form-control, html.dark-mode select.form-control {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--np-line-strong) !important;
  color: var(--np-text) !important;
  font-family: var(--np-font-body) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--np-blue-2) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28) !important;
}
input::placeholder, textarea::placeholder { color: var(--np-dim) !important; }

/* ---------- Halaman login ---------- */
#layout.login, body.task-login, html.dark-mode body.task-login {
  background: radial-gradient(circle at 20% 0%, rgba(37, 99, 235, .18), transparent 55%),
              radial-gradient(circle at 85% 100%, rgba(59, 130, 246, .14), transparent 50%),
              linear-gradient(135deg, var(--np-bg-1), var(--np-bg-2)) !important;
}
#login-form, html.dark-mode #login-form {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--np-line-strong) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 20px 48px rgba(2, 6, 16, 0.6) !important;
}
#login-form .box-inner, html.dark-mode #login-form .box-inner { background: transparent !important; }
#login-form #logo { max-height: 56px; margin-bottom: 6px; }
#login-form .product-name {
  font-family: var(--np-font-head) !important;
  font-size: 22px; font-weight: 700; color: var(--np-text) !important;
}

/* ---------- Dialog / popup / menu ---------- */
.ui-dialog, .popupmenu, .popover, .ui-widget-content,
html.dark-mode .ui-dialog, html.dark-mode .popupmenu, html.dark-mode .popover {
  background-color: var(--np-surface-2) !important;
  border-color: var(--np-line-strong) !important;
  color: var(--np-text) !important;
}
.popupmenu a:hover, .popover a:hover { background: rgba(59, 130, 246, 0.16) !important; }

/* ---------- Scrollbar (senada situs utama) ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(59, 130, 246, 0.55) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.5); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(59, 130, 246, 0.8); background-clip: padding-box; }

/* ---------- Aksen kecil ---------- */
.count, .unreadcount, .badge {
  background: linear-gradient(135deg, var(--np-blue), var(--np-blue-2)) !important;
  color: #fff !important;
}
#messagelist-header, .messagelist thead th { color: var(--np-muted) !important; }