/* =====================================================================
   Planet SurgeWeb themes (extend.css) for SurgeWeb 8.2a New Look
   Install: D:\surgemail\surgeweb\custom\extend.css   (custom_css true)
   Built against a live DOM probe of the 8.2a Standard interface.
   Nothing applies unless extend.js sets html.pn-theme-inbox or
   html.pn-theme-horizon. No external fonts (CSP blocks them).
   Template-engine safety: no double-pipe tokens, no "# " line starts.
   ===================================================================== */

/* ================================================================
   THEME: inbox (Gmail-style)
   ================================================================ */
html.pn-theme-inbox {
  --pn-bg: #f6f8fc;
  --pn-surface: #ffffff;
  --pn-text: #1f1f1f;
  --pn-muted: #444746;
  --pn-faint: #5f6368;
  --pn-line: rgba(100, 121, 143, 0.12);
  --pn-accent: #0b57d0;
  --pn-nav-sel: #d3e3fd;
  --pn-nav-sel-ink: #001d35;
  --pn-hover: rgba(68, 71, 70, 0.08);
  --pn-compose: #c2e7ff;
  --pn-compose-ink: #001d35;
  --pn-search: #eaf1fb;
  --pn-row-read: #f2f6fc;
  --pn-row-sel: #c2dbff;
  --pn-lift: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --pn-font: "Google Sans", "Google Sans Text", Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
}

html.pn-theme-inbox body,
html.pn-theme-inbox body #page_width {
  background-color: var(--pn-bg) !important;
  background-image: none !important;
  color: var(--pn-text);
  font-family: var(--pn-font);
}
html.pn-theme-inbox body input,
html.pn-theme-inbox body select,
html.pn-theme-inbox body button,
html.pn-theme-inbox body td { font-family: var(--pn-font); }

/* ---- Header ---- */
html.pn-theme-inbox body #top_banner {
  background-color: var(--pn-bg) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.pn-theme-inbox body #modern_title_text {
  color: var(--pn-muted) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  text-shadow: none !important;
}
html.pn-theme-inbox body #link_bar,
html.pn-theme-inbox body #link_bar a,
html.pn-theme-inbox body #username_display,
html.pn-theme-inbox body #options_mnu { color: var(--pn-muted) !important; text-decoration: none; }
html.pn-theme-inbox body #switcher .tab_outer { border-radius: 16px 16px 0 0; }

/* ---- Left column ---- */
html.pn-theme-inbox body #left_column,
html.pn-theme-inbox body #lpanel_body_outer,
html.pn-theme-inbox body #lpanel_body,
html.pn-theme-inbox body #lpanel_hdr_outer,
html.pn-theme-inbox body #lpanel_hdr,
html.pn-theme-inbox body #app_menu_outer,
html.pn-theme-inbox body #app_menu,
html.pn-theme-inbox body #el_id_outer,
html.pn-theme-inbox body #el_id {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.pn-theme-inbox body #lpanel_hdr_text { color: var(--pn-muted) !important; }

/* Compose: the big Gmail pill, left column */
html.pn-theme-inbox body #lpanel_compose { padding: 8px 0 12px 8px; height: auto !important; }
html.pn-theme-inbox body input#compose_btn {
  background-color: var(--pn-compose) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23001d35'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 18px center !important;
  background-size: 22px !important;
  color: var(--pn-compose-ink) !important;
  border: 0 !important;
  border-radius: 16px !important;
  height: 56px !important;
  min-width: 132px;
  padding: 0 22px 0 52px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: box-shadow .2s;
}
html.pn-theme-inbox body input#compose_btn:hover { box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15) !important; }
/* One compose button, like Gmail: hide the duplicate in the toolbar */
html.pn-theme-inbox body input#mnu_compose { display: none !important; }

/* Folders */
html.pn-theme-inbox body #folders .folder,
html.pn-theme-inbox body #folders .part_cursor,
html.pn-theme-inbox body #folders .full_cursor {
  color: var(--pn-text) !important;
  border-radius: 0 16px 16px 0 !important;
  background-image: none !important;
}
html.pn-theme-inbox body #folders .part_cursor:hover,
html.pn-theme-inbox body #folders .full_cursor:hover,
html.pn-theme-inbox body #folders .hover_js {
  background-color: var(--pn-hover) !important;
}
html.pn-theme-inbox body #folders .selected,
html.pn-theme-inbox body #folders .selected .part_cursor,
html.pn-theme-inbox body #folders .selected .full_cursor {
  background-color: var(--pn-nav-sel) !important;
  color: var(--pn-nav-sel-ink) !important;
  font-weight: 700 !important;
  border-radius: 0 16px 16px 0 !important;
}
html.pn-theme-inbox body #folders a,
html.pn-theme-inbox body #folders .flist_link { color: inherit !important; text-decoration: none !important; }
html.pn-theme-inbox body #folders b[id^="unread_"] { color: inherit !important; font-weight: 700; font-size: 12px; }
html.pn-theme-inbox body #log_links,
html.pn-theme-inbox body #log_links a { color: var(--pn-faint) !important; font-size: 12px; }

/* App menu (Mail / Calendar / Contacts / Theme) */
html.pn-theme-inbox body #app_menu input.mnu {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 16px 16px 0 !important;
  color: var(--pn-text) !important;
  text-align: left;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.pn-theme-inbox body #app_menu input.mnu:hover { background-color: var(--pn-hover) !important; }
html.pn-theme-inbox body #app_menu input.mnu.sel { background-color: var(--pn-nav-sel) !important; color: var(--pn-nav-sel-ink) !important; font-weight: 700; }

/* ---- Toolbar ---- */
html.pn-theme-inbox body #menubar_outer,
html.pn-theme-inbox body #menubar,
html.pn-theme-inbox body #menu_bar_main {
  background-color: var(--pn-bg) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.pn-theme-inbox body #menu_bar_main input.mnu,
html.pn-theme-inbox body #menu_bar_main select.mnu2 {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: var(--pn-muted) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
}
html.pn-theme-inbox body #menu_bar_main input.mnu:hover,
html.pn-theme-inbox body #menu_bar_main select.mnu2:hover { background-color: var(--pn-hover) !important; }
html.pn-theme-inbox body #foldername1 { color: var(--pn-text) !important; font-size: 18px !important; font-weight: 400 !important; }

/* Search pill */
html.pn-theme-inbox body #search_controls {
  background-color: var(--pn-search) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 24px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center;
  padding: 0 16px !important;
  box-sizing: border-box;
  transition: background-color .15s, box-shadow .15s;
}
html.pn-theme-inbox body #search_controls:focus-within {
  background-color: var(--pn-surface) !important;
  box-shadow: 0 1px 1px 0 rgba(65,69,73,.3), 0 1px 3px 1px rgba(65,69,73,.15) !important;
}
html.pn-theme-inbox body #search_bar_icon { opacity: .7; margin-right: 10px; }
html.pn-theme-inbox body input#search_input {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  height: 40px !important;
  font-size: 16px !important;
  color: var(--pn-text) !important;
  flex: 1;
}
html.pn-theme-inbox body input#search_input::placeholder { color: var(--pn-muted); }

/* ---- Message list ---- */
html.pn-theme-inbox body #messages_outer,
html.pn-theme-inbox body #messages,
html.pn-theme-inbox body #utility { background-color: var(--pn-bg) !important; border: 0 !important; }
html.pn-theme-inbox body #msglist_box {
  background-color: var(--pn-surface) !important;
  border: 0 !important;
  border-radius: 16px 0 0 16px !important;
}
html.pn-theme-inbox body #x_msgs_table { background-color: var(--pn-surface) !important; border-collapse: collapse; }
html.pn-theme-inbox body .msgs_table .msgs_line {
  background-color: var(--pn-row-read);
  background-image: none !important;
  box-shadow: inset 0 -1px 0 var(--pn-line);
  cursor: pointer;
}
html.pn-theme-inbox body .msgs_table .msgs_line.msg_unread { background-color: var(--pn-surface); }
html.pn-theme-inbox body .msgs_table .msgs_line:hover { box-shadow: var(--pn-lift); position: relative; z-index: 1; }
html.pn-theme-inbox body .msgs_table .msgs_line.pn-selected { background-color: var(--pn-row-sel) !important; }
html.pn-theme-inbox body .msgs_table .msgs_line.pn-cursor { background-color: var(--pn-nav-sel) !important; }
html.pn-theme-inbox body .msgs_table .wide_to { color: var(--pn-text); }
html.pn-theme-inbox body .msgs_table .wide_subj { color: var(--pn-text); }
html.pn-theme-inbox body .msgs_table .snippet,
html.pn-theme-inbox body .msgs_table .snippet_outer_wide { color: var(--pn-faint) !important; }
html.pn-theme-inbox body .msgs_table .date_etc { color: var(--pn-muted) !important; font-size: 12px; }
html.pn-theme-inbox body .msgs_table .msg_unread .date_etc { color: var(--pn-text) !important; font-weight: 700; }
html.pn-theme-inbox body .ws_checkbox { accent-color: var(--pn-accent); }

/* ---- Reading pane ---- */
html.pn-theme-inbox body #message_preview {
  background-color: var(--pn-surface) !important;
  border: 0 !important;
  border-left: 1px solid #e0e3e7 !important;
  border-radius: 0 16px 16px 0 !important;
}
html.pn-theme-inbox body #msg_headers {
  background-color: var(--pn-surface) !important;
  background-image: none !important;
  border: 0 !important;
}
html.pn-theme-inbox body #msg_subject { font-size: 22px !important; font-weight: 400 !important; color: var(--pn-text) !important; }
html.pn-theme-inbox body #msg_from { font-weight: 700; color: var(--pn-text) !important; }
html.pn-theme-inbox body #msg_date,
html.pn-theme-inbox body #msg_to { color: var(--pn-muted) !important; }
html.pn-theme-inbox body .sizer { background-color: transparent !important; background-image: none !important; }

/* ================================================================
   THEME: horizon (refined stock)
   ================================================================ */
html.pn-theme-horizon {
  --pn-bg: #e9eef3;
  --pn-surface: #ffffff;
  --pn-surface-2: #f6f8fa;
  --pn-ink: #172033;
  --pn-muted: #5b6678;
  --pn-line: #d9e0e8;
  --pn-accent: #0f7b8a;
  --pn-accent-strong: #0a5f6b;
  --pn-accent-soft: #e2f1f3;
  --pn-sel-row: #d7ecef;
  --pn-font: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}
html.pn-theme-horizon body,
html.pn-theme-horizon body #page_width {
  background-color: var(--pn-bg) !important;
  background-image: none !important;
  color: var(--pn-ink);
  font-family: var(--pn-font);
}
html.pn-theme-horizon body input,
html.pn-theme-horizon body select,
html.pn-theme-horizon body button,
html.pn-theme-horizon body td { font-family: var(--pn-font); }

html.pn-theme-horizon body #top_banner {
  background-color: var(--pn-ink) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: inset 0 -3px 0 var(--pn-accent) !important;
}
html.pn-theme-horizon body #modern_title_text { color: #ffffff !important; font-weight: 600 !important; text-shadow: none !important; }
html.pn-theme-horizon body #link_bar,
html.pn-theme-horizon body #link_bar a,
html.pn-theme-horizon body #username_display,
html.pn-theme-horizon body #options_mnu { color: #c9d3df !important; text-decoration: none; }
html.pn-theme-horizon body #link_bar a:hover,
html.pn-theme-horizon body #options_mnu:hover { color: #ffffff !important; }

/* Panels: white cards on mist */
html.pn-theme-horizon body #lpanel_body,
html.pn-theme-horizon body #msglist_box,
html.pn-theme-horizon body #message_preview {
  background-color: var(--pn-surface) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.05) !important;
}
html.pn-theme-horizon body #lpanel_hdr_outer,
html.pn-theme-horizon body #lpanel_hdr,
html.pn-theme-horizon body #app_menu_outer,
html.pn-theme-horizon body #app_menu,
html.pn-theme-horizon body #el_id_outer,
html.pn-theme-horizon body #el_id,
html.pn-theme-horizon body #messages_outer,
html.pn-theme-horizon body #messages,
html.pn-theme-horizon body #utility {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
html.pn-theme-horizon body #lpanel_hdr_text { color: var(--pn-muted) !important; font-weight: 600; }

/* Compose: the one solid-colour control */
html.pn-theme-horizon body input#compose_btn,
html.pn-theme-horizon body input#mnu_compose {
  background-color: var(--pn-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--pn-accent-strong) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
html.pn-theme-horizon body input#compose_btn:hover,
html.pn-theme-horizon body input#mnu_compose:hover { background-color: var(--pn-accent-strong) !important; }

/* Folders: lit fiber strand on the selected folder */
html.pn-theme-horizon body #folders .folder,
html.pn-theme-horizon body #folders .part_cursor,
html.pn-theme-horizon body #folders .full_cursor { color: var(--pn-ink) !important; background-image: none !important; }
html.pn-theme-horizon body #folders .part_cursor:hover,
html.pn-theme-horizon body #folders .full_cursor:hover,
html.pn-theme-horizon body #folders .hover_js { background-color: rgba(23, 32, 51, 0.05) !important; border-radius: 4px; }
html.pn-theme-horizon body #folders .selected,
html.pn-theme-horizon body #folders .selected .part_cursor,
html.pn-theme-horizon body #folders .selected .full_cursor {
  background-color: var(--pn-accent-soft) !important;
  color: var(--pn-accent-strong) !important;
  font-weight: 600 !important;
  border-radius: 0 4px 4px 0 !important;
  box-shadow: inset 3px 0 0 var(--pn-accent), -2px 0 8px -2px rgba(15, 123, 138, 0.55) !important;
}
html.pn-theme-horizon body #folders a,
html.pn-theme-horizon body #folders .flist_link { color: inherit !important; text-decoration: none !important; }
html.pn-theme-horizon body #folders b[id^="unread_"] { color: var(--pn-accent-strong) !important; }

html.pn-theme-horizon body #app_menu input.mnu {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--pn-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.pn-theme-horizon body #app_menu input.mnu:hover { background-color: rgba(23, 32, 51, 0.06) !important; }
html.pn-theme-horizon body #app_menu input.mnu.sel { background-color: var(--pn-accent-soft) !important; color: var(--pn-accent-strong) !important; font-weight: 600; }

/* Toolbar */
html.pn-theme-horizon body #menubar_outer,
html.pn-theme-horizon body #menubar,
html.pn-theme-horizon body #menu_bar_main {
  background-color: var(--pn-bg) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.pn-theme-horizon body #menu_bar_main input.mnu:not(#mnu_compose),
html.pn-theme-horizon body #menu_bar_main select.mnu2 {
  background-color: var(--pn-surface) !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 6px !important;
  color: var(--pn-ink) !important;
  text-shadow: none !important;
  box-shadow: 0 1px 0 rgba(23, 32, 51, 0.04) !important;
}
html.pn-theme-horizon body #menu_bar_main input.mnu:not(#mnu_compose):hover,
html.pn-theme-horizon body #menu_bar_main select.mnu2:hover { border-color: #b7c2cf !important; background-color: var(--pn-surface-2) !important; }
html.pn-theme-horizon body #search_controls {
  background-color: var(--pn-surface) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}
html.pn-theme-horizon body #search_controls:focus-within { border-color: var(--pn-accent) !important; box-shadow: 0 0 0 3px rgba(15, 123, 138, 0.18) !important; }
html.pn-theme-horizon body input#search_input { background-color: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; }

/* Message list */
html.pn-theme-horizon body .msgs_table .msgs_line {
  background-color: var(--pn-surface);
  background-image: none !important;
  box-shadow: inset 0 -1px 0 #edf1f5;
}
html.pn-theme-horizon body .msgs_table .msgs_line.msg_unread { box-shadow: inset 3px 0 0 var(--pn-accent), inset 0 -1px 0 #edf1f5; }
html.pn-theme-horizon body .msgs_table .msgs_line:hover { background-color: var(--pn-surface-2); }
html.pn-theme-horizon body .msgs_table .msgs_line.pn-selected,
html.pn-theme-horizon body .msgs_table .msgs_line.pn-cursor { background-color: var(--pn-sel-row) !important; }
html.pn-theme-horizon body .msgs_table .snippet { color: var(--pn-muted) !important; }
html.pn-theme-horizon body .msgs_table .date_etc { color: var(--pn-muted) !important; }
html.pn-theme-horizon body .ws_checkbox { accent-color: var(--pn-accent); }

/* Reading pane */
html.pn-theme-horizon body #msg_headers { background-color: var(--pn-surface-2) !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--pn-line) !important; }
html.pn-theme-horizon body #msg_subject { font-weight: 600 !important; color: var(--pn-ink) !important; }
html.pn-theme-horizon body #msg_date,
html.pn-theme-horizon body #msg_to { color: var(--pn-muted) !important; }
html.pn-theme-horizon body .sizer { background-color: transparent !important; background-image: none !important; }

/* ================================================================
   Shared
   ================================================================ */
html[class*="pn-theme-"] body *:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html[class*="pn-theme-"] body * { transition: none !important; }
}

/* DOM probe overlay */
html .pn-probe {
  position: fixed; inset: 5vh 5vw; z-index: 2147483647;
  display: flex; flex-direction: column;
  background: #ffffff; color: #172033;
  border: 1px solid #c9d2dc; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  font: 13px/1.4 "Segoe UI", Helvetica, Arial, sans-serif;
}
html .pn-probe-bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #e3e8ee; }
html .pn-probe-bar strong { flex: 1; }
html .pn-probe textarea { flex: 1; margin: 0; border: 0; padding: 12px; resize: none; font: 12px/1.45 Consolas, Menlo, monospace; white-space: pre; }