/* ═══════════════════════════════════════════════════════════════════════
   SORA Roundcube Skin — Child of Elastic
   Loads Elastic's compiled CSS first (via @import), then layers a full
   SORA design pass on top, scoped to html.dark-mode so the user can
   opt-out via Roundcube settings.
   ═══════════════════════════════════════════════════════════════════════ */

@import url("../../elastic/styles/styles.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: dark;
}

/* ── Typography base ─────────────────────────────────────────────────── */

html,
body,
.popover,
.ui-widget,
input,
select,
textarea,
button {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.01em;
}

code, pre, kbd, samp, .font-mono, tt {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* ── Dark-Mode SORA overrides (everything below is .dark-mode scoped) ── */

html.dark-mode body {
  background-color: #0d0e12 !important;
  color: #e8eaed !important;
}

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode legend {
  letter-spacing: -0.025em !important;
  color: #e8eaed !important;
}

/* Layout surfaces */
html.dark-mode #layout,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode .layout-sidebar,
html.dark-mode .layout-list,
html.dark-mode .layout-content {
  background-color: #0d0e12 !important;
}

html.dark-mode #layout-sidebar,
html.dark-mode #taskmenu {
  background-color: #13141a !important;
  border-color: #2a2d35 !important;
}

html.dark-mode #layout-list {
  background-color: #16171c !important;
  border-right-color: #2a2d35 !important;
}

html.dark-mode #layout-content {
  background-color: #0d0e12 !important;
}

/* Header / toolbar / searchbar */
html.dark-mode .header,
html.dark-mode #layout > .header,
html.dark-mode #layout > div > .header,
html.dark-mode #messageheader,
html.dark-mode .toolbar,
html.dark-mode .menu.toolbar {
  background-color: #16171c !important;
  border-color: #2a2d35 !important;
  color: #e8eaed !important;
}

html.dark-mode .toolbar a,
html.dark-mode .toolbar a.button,
html.dark-mode .toolbar button {
  color: #8a8f98 !important;
  background-color: transparent !important;
  border-radius: 8px !important;
}

html.dark-mode .toolbar a:hover,
html.dark-mode .toolbar a.button:hover,
html.dark-mode .toolbar button:hover {
  color: #e8eaed !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .toolbar a.button.disabled,
html.dark-mode .toolbar button:disabled {
  color: #4a4d55 !important;
}

/* Taskmenu (left icon bar) */
html.dark-mode #taskmenu a,
html.dark-mode .menu.toolbar a {
  color: #8a8f98 !important;
  background-color: transparent !important;
  border-radius: 8px !important;
  margin: 2px 6px !important;
}

html.dark-mode #taskmenu a:hover {
  color: #e8eaed !important;
  background-color: rgba(94, 106, 210, 0.08) !important;
}

html.dark-mode #taskmenu a.selected {
  color: #ffffff !important;
  background-color: rgba(94, 106, 210, 0.18) !important;
  border: 1px solid rgba(94, 106, 210, 0.4) !important;
}

html.dark-mode #taskmenu a.button-logout {
  color: #ef4444 !important;
}

html.dark-mode #taskmenu a.button-logout:hover {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Searchbar */
html.dark-mode .searchbar,
html.dark-mode #quicksearchbar,
html.dark-mode #messagesearchfilter,
html.dark-mode .searchbar input {
  background-color: #1c1d22 !important;
  border-color: #2a2d35 !important;
  color: #e8eaed !important;
  border-radius: 8px !important;
}

html.dark-mode .searchbar input:focus,
html.dark-mode .searchbar input.focused {
  border-color: #5e6ad2 !important;
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.2) !important;
  outline: none !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

html.dark-mode button,
html.dark-mode input[type="button"],
html.dark-mode input[type="submit"],
html.dark-mode a.button,
html.dark-mode .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  transition: all 0.15s ease !important;
}

html.dark-mode button.btn-primary,
html.dark-mode .btn-primary,
html.dark-mode input.button.mainaction,
html.dark-mode button.mainaction,
html.dark-mode a.button.mainaction {
  background-color: #5e6ad2 !important;
  background-image: none !important;
  border-color: #5e6ad2 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(94, 106, 210, 0.2) !important;
}

html.dark-mode button.btn-primary:hover,
html.dark-mode .btn-primary:hover,
html.dark-mode input.button.mainaction:hover,
html.dark-mode button.mainaction:hover,
html.dark-mode a.button.mainaction:hover {
  background-color: #7078db !important;
  border-color: #7078db !important;
  box-shadow: 0 4px 12px rgba(94, 106, 210, 0.3) !important;
}

html.dark-mode button.btn-secondary,
html.dark-mode .btn-secondary,
html.dark-mode input.button,
html.dark-mode a.button:not(.mainaction):not(.btn-primary) {
  background-color: transparent !important;
  border: 1px solid #2a2d35 !important;
  color: #e8eaed !important;
}

html.dark-mode button.btn-secondary:hover,
html.dark-mode .btn-secondary:hover,
html.dark-mode input.button:hover,
html.dark-mode a.button:not(.mainaction):not(.btn-primary):hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(94, 106, 210, 0.4) !important;
}

html.dark-mode button.btn-danger,
html.dark-mode .btn-danger {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

html.dark-mode button.btn-danger:hover,
html.dark-mode .btn-danger:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* ── Forms ───────────────────────────────────────────────────────────── */

html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="search"],
html.dark-mode input[type="url"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="number"],
html.dark-mode input[type="date"],
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .form-control,
html.dark-mode .ui-autocomplete-input {
  background-color: #1c1d22 !important;
  border: 1px solid #2a2d35 !important;
  color: #e8eaed !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.75rem !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .form-control:focus {
  border-color: #5e6ad2 !important;
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.2) !important;
  outline: none !important;
}

html.dark-mode label {
  color: #e8eaed !important;
  font-weight: 500 !important;
}

html.dark-mode .form-text,
html.dark-mode .text-muted,
html.dark-mode .hint {
  color: #8a8f98 !important;
}

/* Custom checkboxes */
html.dark-mode input[type="checkbox"],
html.dark-mode input[type="radio"] {
  accent-color: #5e6ad2 !important;
}

html.dark-mode .custom-checkbox label::before,
html.dark-mode .custom-switch label::before {
  background-color: #1c1d22 !important;
  border-color: #2a2d35 !important;
}

html.dark-mode .custom-checkbox input:checked + label::before,
html.dark-mode .custom-switch input:checked + label::before {
  background-color: #5e6ad2 !important;
  border-color: #5e6ad2 !important;
}

/* ── Listings (Folders, Messages, Contacts, Settings) ────────────────── */

html.dark-mode .listing,
html.dark-mode .messagelist,
html.dark-mode table.records-table {
  background-color: transparent !important;
  color: #e8eaed !important;
}

html.dark-mode .listing tr,
html.dark-mode .listing li,
html.dark-mode .messagelist tr {
  border-color: #2a2d35 !important;
  background-color: transparent !important;
}

html.dark-mode .listing tr td,
html.dark-mode .listing li a,
html.dark-mode .messagelist td {
  color: #e8eaed !important;
  border-color: #2a2d35 !important;
}

html.dark-mode .listing tr:hover td,
html.dark-mode .listing li:hover > a,
html.dark-mode .messagelist tr:hover td {
  background-color: #1c1d22 !important;
}

html.dark-mode .listing tr.selected td,
html.dark-mode .listing tr.focused.selected td,
html.dark-mode .listing li.selected > a,
html.dark-mode .messagelist tr.selected td,
html.dark-mode .messagelist tr.focused.selected td {
  background-color: rgba(94, 106, 210, 0.18) !important;
  color: #ffffff !important;
  border-left: 3px solid #5e6ad2 !important;
}

html.dark-mode .messagelist tr.unread td,
html.dark-mode .messagelist tr.unread .subject {
  font-weight: 600 !important;
  color: #ffffff !important;
}

html.dark-mode .messagelist tr.deleted td {
  text-decoration: line-through !important;
  color: #5a5d65 !important;
}

/* Folder counter badges */
html.dark-mode .listing .unreadcount,
html.dark-mode .folderlist .unreadcount {
  background-color: #5e6ad2 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 1px 8px !important;
  font-size: 11px !important;
}

/* Flagged */
html.dark-mode .messagelist tr.flagged td,
html.dark-mode .messagelist td.flag span.flagged {
  color: #f59e0b !important;
}

/* Status icons */
html.dark-mode .messagelist td.status .deleted::before { color: #ef4444 !important; }
html.dark-mode .messagelist td.threads { color: #5e6ad2 !important; }

/* ── Folder tree ─────────────────────────────────────────────────────── */

html.dark-mode .folderlist li > a,
html.dark-mode #directorylist li > a {
  color: #8a8f98 !important;
  border-radius: 6px !important;
}

html.dark-mode .folderlist li > a:hover,
html.dark-mode #directorylist li > a:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #e8eaed !important;
}

html.dark-mode .folderlist li.selected > a,
html.dark-mode #directorylist li.selected > a {
  background-color: rgba(94, 106, 210, 0.18) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

html.dark-mode .folderlist .treetoggle::before,
html.dark-mode #directorylist .treetoggle::before {
  color: #5a5d65 !important;
}

/* ── Message view ────────────────────────────────────────────────────── */

html.dark-mode #messageheader,
html.dark-mode .message-header {
  background-color: #16171c !important;
  border-bottom: 1px solid #2a2d35 !important;
  color: #e8eaed !important;
}

html.dark-mode #messageheader .subject,
html.dark-mode .message-header .subject {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

html.dark-mode .message-htmlpart,
html.dark-mode .message-part,
html.dark-mode #messagebody {
  background-color: #0d0e12 !important;
  color: #e8eaed !important;
}

html.dark-mode .attachmentslist li {
  background-color: #1c1d22 !important;
  border: 1px solid #2a2d35 !important;
  border-radius: 8px !important;
  color: #e8eaed !important;
}

html.dark-mode .attachmentslist li:hover {
  border-color: rgba(94, 106, 210, 0.4) !important;
  background-color: #1c1d22 !important;
}

/* ── Compose editor ──────────────────────────────────────────────────── */

html.dark-mode #compose-content,
html.dark-mode #compose-headers,
html.dark-mode #composebody,
html.dark-mode .editor-toolbar {
  background-color: #16171c !important;
  color: #e8eaed !important;
  border-color: #2a2d35 !important;
}

/* ── Dialogs / Popovers / Tooltips ───────────────────────────────────── */

html.dark-mode .ui-dialog,
html.dark-mode .popover,
html.dark-mode .dropdown-menu,
html.dark-mode .ui-widget-content {
  background-color: #16171c !important;
  border: 1px solid #2a2d35 !important;
  border-radius: 12px !important;
  color: #e8eaed !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .ui-dialog .ui-dialog-titlebar {
  background-color: #16171c !important;
  border-bottom: 1px solid #2a2d35 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

html.dark-mode .ui-dialog .ui-dialog-content {
  background-color: #16171c !important;
  color: #e8eaed !important;
}

html.dark-mode .ui-dialog .ui-dialog-buttonpane {
  background-color: #13141a !important;
  border-top: 1px solid #2a2d35 !important;
}

html.dark-mode .popover .menu li > a,
html.dark-mode .dropdown-menu .menu li > a,
html.dark-mode .dropdown-item {
  color: #e8eaed !important;
  border-radius: 6px !important;
  margin: 1px 4px !important;
}

html.dark-mode .popover .menu li > a:hover,
html.dark-mode .dropdown-menu .menu li > a:hover,
html.dark-mode .dropdown-item:hover {
  background-color: rgba(94, 106, 210, 0.15) !important;
  color: #ffffff !important;
}

html.dark-mode .ui-tooltip,
html.dark-mode .tooltip-inner {
  background-color: #1c1d22 !important;
  color: #e8eaed !important;
  border: 1px solid #2a2d35 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* ── Tabs (Settings, Preferences) ────────────────────────────────────── */

html.dark-mode .tabbed > .tablinks,
html.dark-mode .ui-tabs .ui-tabs-nav,
html.dark-mode .nav-tabs {
  background-color: #16171c !important;
  border-bottom: 1px solid #2a2d35 !important;
}

html.dark-mode .tabbed > .tablinks a,
html.dark-mode .ui-tabs .ui-tabs-nav li a,
html.dark-mode .nav-tabs .nav-link {
  color: #8a8f98 !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem !important;
  font-weight: 500 !important;
}

html.dark-mode .tabbed > .tablinks a:hover,
html.dark-mode .ui-tabs .ui-tabs-nav li a:hover,
html.dark-mode .nav-tabs .nav-link:hover {
  color: #e8eaed !important;
}

html.dark-mode .tabbed > .tablinks a.selected,
html.dark-mode .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
html.dark-mode .nav-tabs .nav-link.active {
  color: #ffffff !important;
  border-bottom: 2px solid #5e6ad2 !important;
  background-color: transparent !important;
  font-weight: 600 !important;
}

/* ── Notifications / Alerts ──────────────────────────────────────────── */

html.dark-mode .ui.alert,
html.dark-mode #message-notice,
html.dark-mode .alert {
  border-radius: 10px !important;
  border-width: 1px !important;
  padding: 0.75rem 1rem !important;
}

html.dark-mode .ui.alert.alert-info,
html.dark-mode .alert.alert-info {
  background-color: rgba(94, 106, 210, 0.1) !important;
  border-color: rgba(94, 106, 210, 0.3) !important;
  color: #b8c0f0 !important;
}

html.dark-mode .ui.alert.alert-success,
html.dark-mode .alert.alert-success,
html.dark-mode .confirmation {
  background-color: rgba(45, 212, 191, 0.1) !important;
  border-color: rgba(45, 212, 191, 0.3) !important;
  color: #5eead4 !important;
}

html.dark-mode .ui.alert.alert-warning,
html.dark-mode .alert.alert-warning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}

html.dark-mode .ui.alert.alert-danger,
html.dark-mode .alert.alert-danger,
html.dark-mode .error {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

html.dark-mode #message,
html.dark-mode #messagestack > div {
  background-color: #16171c !important;
  border: 1px solid #2a2d35 !important;
  border-radius: 10px !important;
  color: #e8eaed !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* ── Login page ──────────────────────────────────────────────────────── */

html.dark-mode.task-login body {
  background: radial-gradient(circle at 30% 20%, rgba(94, 106, 210, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(94, 106, 210, 0.05) 0%, transparent 50%),
              #0d0e12 !important;
}

html.dark-mode #login-form {
  background-color: #16171c !important;
  border: 1px solid #2a2d35 !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  padding: 2.5rem 2rem !important;
}

html.dark-mode #login-form h1,
html.dark-mode #login-form .logo {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
}

html.dark-mode #login-form .formcontent {
  background-color: transparent !important;
}

html.dark-mode #login-form .formbuttons input.button {
  background-color: #5e6ad2 !important;
  border-color: #5e6ad2 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.625rem 1.5rem !important;
  border-radius: 8px !important;
  width: 100% !important;
}

html.dark-mode #login-form .formbuttons input.button:hover {
  background-color: #7078db !important;
  border-color: #7078db !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */

html.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.dark-mode ::-webkit-scrollbar-track {
  background: #0d0e12;
}
html.dark-mode ::-webkit-scrollbar-thumb {
  background: #2a2d35;
  border-radius: 6px;
  border: 2px solid #0d0e12;
}
html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #3a3d45;
}
html.dark-mode ::-webkit-scrollbar-corner {
  background: #0d0e12;
}

html.dark-mode {
  scrollbar-color: #2a2d35 #0d0e12;
  scrollbar-width: thin;
}

/* ── Status bar / Footer ─────────────────────────────────────────────── */

html.dark-mode .statusbar,
html.dark-mode #statusbar,
html.dark-mode .footer {
  background-color: #13141a !important;
  border-top: 1px solid #2a2d35 !important;
  color: #8a8f98 !important;
}

/* ── Quota widget ────────────────────────────────────────────────────── */

html.dark-mode .quota-widget {
  background-color: #1c1d22 !important;
  border: 1px solid #2a2d35 !important;
  border-radius: 6px !important;
}

html.dark-mode .quota-widget .bar,
html.dark-mode .quota-widget .progress-bar {
  background-color: #5e6ad2 !important;
}

html.dark-mode .quota-widget.warning .bar,
html.dark-mode .quota-widget.warning .progress-bar {
  background-color: #f59e0b !important;
}

html.dark-mode .quota-widget.critical .bar,
html.dark-mode .quota-widget.critical .progress-bar {
  background-color: #ef4444 !important;
}

/* ── Links ───────────────────────────────────────────────────────────── */

html.dark-mode a {
  color: #8590f2;
  text-decoration: none;
}

html.dark-mode a:hover {
  color: #a5aef5;
  text-decoration: underline;
}

/* ── Misc cleanups ───────────────────────────────────────────────────── */

html.dark-mode hr {
  border-color: #2a2d35 !important;
}

html.dark-mode .toolbarmenu,
html.dark-mode .menu {
  background-color: #16171c !important;
  border: 1px solid #2a2d35 !important;
  border-radius: 8px !important;
}

html.dark-mode .toolbarmenu li > a,
html.dark-mode .menu li > a {
  color: #e8eaed !important;
}

html.dark-mode .toolbarmenu li > a:hover,
html.dark-mode .menu li > a:hover {
  background-color: rgba(94, 106, 210, 0.15) !important;
}

/* Fix table headers in settings / address book */
html.dark-mode .records-table thead th,
html.dark-mode table.propform thead th {
  background-color: #1c1d22 !important;
  color: #8a8f98 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  border-bottom: 1px solid #2a2d35 !important;
}

/* ── Iframe edge ─────────────────────────────────────────────────────── */
html.dark-mode html.iframe,
html.dark-mode html.iframe body {
  background-color: #0d0e12 !important;
}