@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Glass theme over Elastic (dark mode). Panels are frosted glass floating over an
   aurora background; accents run cyan -> violet -> pink. */
:root {
  --glass-bg: #060914;
  --glass-panel: rgba(255, 255, 255, .055);
  --glass-panel-strong: rgba(18, 22, 44, .78);
  --glass-hover: rgba(255, 255, 255, .07);
  --glass-line: rgba(255, 255, 255, .11);
  --glass-text: #e7ebff;
  --glass-muted: #9aa3c7;
  --glass-cyan: #5ee7ff;
  --glass-violet: #8b7bff;
  --glass-pink: #ff6bd6;
  --glass-accent: linear-gradient(135deg, var(--glass-cyan), var(--glass-violet) 55%, var(--glass-pink));
  --glass-glow: 0 0 0 1px rgba(139, 123, 255, .45), 0 0 24px rgba(94, 231, 255, .25);
  --glass-radius: 18px;
  --glass-blur: blur(22px) saturate(160%);
}

html body,
html.dark-mode body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--glass-text);
  background-color: var(--glass-bg);
  background-image:
    radial-gradient(60vmax 60vmax at 8% 0%, rgba(94, 231, 255, .20), transparent 60%),
    radial-gradient(50vmax 50vmax at 100% 20%, rgba(139, 123, 255, .24), transparent 60%),
    radial-gradient(55vmax 55vmax at 60% 110%, rgba(255, 107, 214, .16), transparent 60%);
  background-attachment: fixed;
}

/* Framed pages (preview, settings forms) let the panel behind them show through. */
html.iframe body,
html.dark-mode.iframe body {
  background: transparent;
}

::selection { background: rgba(139, 123, 255, .45); }

* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ panels */

html #layout > div,
html.dark-mode #layout > div,
html #layout-menu,
html.dark-mode #layout-menu {
  background: var(--glass-panel) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line) !important;
  color: var(--glass-text);
}

html #layout > div > .header,
html #layout > div > .footer,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
html .header,
html.dark-mode .header,
html .formbuttons,
html.dark-mode .formbuttons {
  background: transparent !important;
  border-color: var(--glass-line) !important;
  color: var(--glass-text);
}

html .header-title,
html.dark-mode .header-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Desktop: panels float as separate rounded cards. */
@media screen and (min-width: 1025px) {
  html #layout {
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
  }

  html #layout > div,
  html #layout-menu {
    border: 1px solid var(--glass-line) !important;
    border-radius: var(--glass-radius);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}

/* ------------------------------------------------------------- task menu */

html #layout-menu #taskmenu a,
html.dark-mode #layout-menu #taskmenu a {
  color: var(--glass-muted);
  border-radius: 14px;
  margin: 2px 8px;
  transition: background .2s, color .2s, box-shadow .2s;
}

html #layout-menu #taskmenu a:hover,
html.dark-mode #layout-menu #taskmenu a:hover {
  background: var(--glass-hover);
  color: var(--glass-text);
}

html #layout-menu #taskmenu a.selected,
html.dark-mode #layout-menu #taskmenu a.selected {
  background: rgba(139, 123, 255, .16);
  color: #fff;
  box-shadow: var(--glass-glow);
}

/* The theme is dark only. */
html #taskmenu a.theme { display: none !important; }

html #layout-menu .action-buttons a.compose,
html.dark-mode #layout-menu .action-buttons a.compose {
  background: var(--glass-accent);
  color: #0b0d1c;
  font-weight: 600;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(139, 123, 255, .35);
}

/* -------------------------------------------------------- lists and rows */

html .listing li,
html .listing tr,
html .listing td,
html table.records-table tr,
html table.records-table td,
html.dark-mode .listing li,
html.dark-mode .listing tr,
html.dark-mode .listing td,
html.dark-mode table.records-table tr,
html.dark-mode table.records-table td {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, .06) !important;
  color: var(--glass-text);
}

html .listing li > a,
html.dark-mode .listing li > a { color: var(--glass-text); border-radius: 12px; }

html .listing li:hover,
html .listing tr:hover td,
html.dark-mode .listing li:hover,
html.dark-mode .listing tr:hover td {
  background-color: var(--glass-hover) !important;
}

html .listing li.selected,
html .listing tr.selected td,
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
  background-color: rgba(139, 123, 255, .18) !important;
  color: #fff !important;
}

html .listing tr.selected td:first-child,
html.dark-mode .listing tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--glass-cyan);
}

html table.messagelist tr.unread .subject,
html.dark-mode table.messagelist tr.unread .subject { color: #fff; font-weight: 700; }

html table.messagelist .date,
html table.messagelist .size,
html.dark-mode table.messagelist .date,
html.dark-mode table.messagelist .size { color: var(--glass-muted); }

html .listing li .unreadcount,
html .listing li .count,
html.dark-mode .listing li .unreadcount,
html.dark-mode .listing li .count {
  background: var(--glass-accent) !important;
  color: #0b0d1c !important;
  font-weight: 700;
  border-radius: 10px;
}

/* ------------------------------------------------------- controls & forms */

html .form-control,
html .custom-select,
html input[type=text],
html input[type=password],
html input[type=email],
html input[type=search],
html textarea,
html select,
html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode input[type=text],
html.dark-mode input[type=password],
html.dark-mode input[type=email],
html.dark-mode input[type=search],
html.dark-mode textarea,
html.dark-mode select {
  background-color: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--glass-line) !important;
  color: var(--glass-text) !important;
  border-radius: 12px;
}

html .form-control:focus,
html input:focus,
html textarea:focus,
html select:focus,
html.dark-mode .form-control:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  border-color: rgba(139, 123, 255, .7) !important;
  box-shadow: var(--glass-glow) !important;
  outline: none;
}

html .input-group-text,
html.dark-mode .input-group-text {
  background: rgba(255, 255, 255, .04) !important;
  border-color: var(--glass-line) !important;
  color: var(--glass-muted) !important;
}

html .btn-primary,
html button.mainaction,
html input.mainaction,
html.dark-mode .btn-primary,
html.dark-mode button.mainaction,
html.dark-mode input.mainaction {
  background: var(--glass-accent) !important;
  border: 0 !important;
  color: #0b0d1c !important;
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(139, 123, 255, .35);
  transition: transform .15s, box-shadow .15s;
}

html .btn-primary:hover,
html button.mainaction:hover,
html.dark-mode .btn-primary:hover,
html.dark-mode button.mainaction:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(139, 123, 255, .5);
}

html .btn-secondary,
html.dark-mode .btn-secondary {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--glass-line) !important;
  color: var(--glass-text) !important;
  border-radius: 12px;
}

html a,
html.dark-mode a { color: var(--glass-cyan); }

html .toolbar a.button,
html.dark-mode .toolbar a.button { color: var(--glass-muted); border-radius: 12px; }

html .toolbar a.button:hover,
html.dark-mode .toolbar a.button:hover { color: #fff; background: var(--glass-hover); }

/* ------------------------------------------------ popovers & dialogs */

html .popover,
html .ui-dialog,
html .ui-datepicker,
html.dark-mode .popover,
html.dark-mode .ui-dialog,
html.dark-mode .ui-datepicker {
  background: var(--glass-panel-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line) !important;
  border-radius: var(--glass-radius) !important;
  color: var(--glass-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

html .popover-header,
html .popover-body,
html .ui-dialog-titlebar,
html .ui-dialog-content,
html .ui-dialog-buttonpane,
html.dark-mode .popover-header,
html.dark-mode .popover-body,
html.dark-mode .ui-dialog-titlebar,
html.dark-mode .ui-dialog-content,
html.dark-mode .ui-dialog-buttonpane {
  background: transparent !important;
  border-color: var(--glass-line) !important;
  color: var(--glass-text);
}

html .ui-widget-overlay,
html.dark-mode .ui-widget-overlay {
  background: rgba(4, 6, 16, .55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html .popover .listing li a:hover,
html.dark-mode .popover .listing li a:hover { background: var(--glass-hover) !important; }

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

html body.task-login #layout-content,
html.dark-mode body.task-login #layout-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html body.task-login #logo {
  width: 84px;
  height: 84px;
  max-height: none;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 0 28px rgba(139, 123, 255, .55));
}

html body.task-login #login-form,
html.dark-mode body.task-login #login-form {
  width: min(400px, calc(100vw - 32px));
  max-width: none;
  padding: 2rem 1.75rem 1.5rem;
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  box-sizing: border-box;
}

html body.task-login #login-form table,
html body.task-login #login-form tbody,
html body.task-login #login-form tr,
html body.task-login #login-form td {
  background: transparent !important;
  border: 0 !important;
}

html body.task-login #login-form input.form-control {
  height: 46px;
  padding: 0 14px;
}

html body.task-login #login-form .formbuttons button,
html body.task-login #login-form button.mainaction {
  width: 100%;
  height: 46px;
  margin-top: .5rem;
  font-size: 1rem;
  letter-spacing: .02em;
}

html body.task-login #login-footer,
html.dark-mode body.task-login #login-footer {
  color: var(--glass-muted);
  margin-top: 1.25rem;
}

html body.task-login #login-footer a { color: var(--glass-muted); }

/* --------------------------------------------------------------- misc */

html #messagestack div,
html.dark-mode #messagestack div {
  background: var(--glass-panel-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  color: var(--glass-text) !important;
}

html .quota-widget .bar,
html.dark-mode .quota-widget .bar { background: rgba(255, 255, 255, .08); border-radius: 8px; }

html .quota-widget .bar .value,
html.dark-mode .quota-widget .bar .value { background: var(--glass-accent); }

@media (prefers-reduced-motion: reduce) {
  html * { transition: none !important; }
}