/* ============================================================
   Material Design 3 (dark) theme for Roundcube Elastic
   "mail.th3web.com" — clean rework (v21)

   Strategy: layer a tidy MD3 system on top of Elastic's NATIVE
   dark mode (html.dark-mode, set via the colorMode cookie).
   - Real selectors, verified against the live DOM.
   - Message list = MD3 rounded cards (border-spacing) + a CSS grid
     row (avatar | sender | subject | date) — no fixed-width gaps.
   - No MutationObserver / no single-click hijack (both caused
     regressions before). Avatars are drawn by CSS from data-avatar.
   ============================================================ */

@font-face{font-family:'VK Sans Display';src:url('fonts/VKSansDisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'VK Sans Display';src:url('fonts/VKSansDisplay-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'VK Sans Display';src:url('fonts/VKSansDisplay-DemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'VK Sans Display';src:url('fonts/VKSansDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* ---- MD3 dark surfaces (slightly warm near-black) ---- */
  --md-surface:#111216;
  --md-surface-container-lowest:#0B0C0F;
  --md-surface-container-low:#191A1F;
  --md-surface-container:#1F2025;
  --md-surface-container-high:#26272C;
  --md-surface-container-highest:#303138;

  --md-on-surface:#E5E2E9;
  --md-on-surface-variant:#C2C6D0;
  --md-on-surface-faint:#9A9EA8;
  --md-outline:#8B8F99;
  --md-outline-variant:#373942;

  /* ---- Accent: Material/Gmail blue ---- */
  --md-primary:#A8C7FA;             /* light tone for text/icons on dark */
  --md-on-primary:#06305F;
  --md-primary-container:#0B57D0;   /* filled blue (FAB / send) */
  --md-on-primary-container:#FFFFFF;
  --md-secondary-container:#1E3A60; /* soft blue selection */
  --md-on-secondary-container:#D7E3FF;
  --md-error:#F2B8B5;

  /* ---- State layers ---- */
  --md-state-hover:rgba(228,226,233,.06);
  --md-state-press:rgba(228,226,233,.11);

  /* ---- Shape ---- */
  --md-r-xs:6px; --md-r-sm:10px; --md-r-md:14px; --md-r-lg:18px; --md-r-xl:26px; --md-r-full:999px;

  /* ---- Type ---- */
  --md-font:'VK Sans Display','Roboto','Segoe UI',system-ui,Arial,sans-serif;

  /* layout metrics */
  --rail-w:76px;
  --sidebar-w:248px;
}

/* ---- Typography everywhere ---- */
html.dark-mode,html.dark-mode body,html.dark-mode input,html.dark-mode button,
html.dark-mode textarea,html.dark-mode select,html.dark-mode .username,
html.dark-mode .boxtitle,html.dark-mode .listing,html.dark-mode .messagelist,
html.dark-mode .menu,html.dark-mode .toolbar,html.dark-mode h1,html.dark-mode h2,
html.dark-mode h3,html.dark-mode a{font-family:var(--md-font) !important;}

/* ============================================================
   Base surfaces
   ============================================================ */
html.dark-mode,html.dark-mode body,html.dark-mode #layout,
html.dark-mode #layout-menu,html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,html.dark-mode #layout-content,
html.dark-mode #taskmenu,html.dark-mode .menu,html.dark-mode .footer{
  background-color:var(--md-surface) !important;
  color:var(--md-on-surface);
}
html.dark-mode a{color:var(--md-primary);}
html.dark-mode ::selection{background:var(--md-secondary-container);color:var(--md-on-secondary-container);}

/* Panel separators — thin, consistent */
html.dark-mode #layout-menu{border-right:1px solid var(--md-outline-variant) !important;}
html.dark-mode #layout-sidebar{border-right:1px solid var(--md-outline-variant) !important;}
html.dark-mode #layout-list{border-right:1px solid var(--md-outline-variant) !important;}

/* ============================================================
   Navigation rail  (#layout-menu / #taskmenu)
   Wide enough to breathe; one icon style; active = tonal pill.
   ============================================================ */
html.dark-mode #layout-menu{
  width:var(--rail-w) !important;min-width:var(--rail-w) !important;flex:0 0 var(--rail-w) !important;
}
html.dark-mode #taskmenu{
  display:flex !important;flex-direction:column !important;align-items:center !important;
  padding:10px 0 14px !important;gap:2px !important;height:100% !important;box-sizing:border-box;
}
/* every rail item = 48px round target, icon centered, label hidden */
html.dark-mode #taskmenu a{
  box-sizing:border-box !important;
  width:48px !important;height:48px !important;min-width:48px !important;
  margin:3px 0 !important;padding:0 !important;border:0 !important;
  border-radius:var(--md-r-full) !important;overflow:hidden !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  color:var(--md-on-surface-variant) !important;background:transparent !important;
  transition:background-color .15s,color .15s;float:none !important;
}
html.dark-mode #taskmenu a .inner{display:none !important;}
html.dark-mode #taskmenu a::before{
  float:none !important;margin:0 !important;width:auto !important;height:auto !important;
  font-size:22px !important;line-height:1 !important;color:inherit !important;opacity:1 !important;
}
html.dark-mode #taskmenu a:hover{background:var(--md-state-hover) !important;color:var(--md-on-surface) !important;}
/* active task → filled tonal indicator */
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a[aria-disabled="true"]{
  background:var(--md-secondary-container) !important;color:var(--md-on-secondary-container) !important;
}
/* compose → primary FAB at the top of the rail */
html.dark-mode #taskmenu .action-buttons{margin-bottom:8px !important;}
html.dark-mode #taskmenu a.compose{
  width:56px !important;height:56px !important;border-radius:var(--md-r-lg) !important;
  background:var(--md-primary-container) !important;color:var(--md-on-primary-container) !important;
  box-shadow:0 3px 8px rgba(0,0,0,.5) !important;
}
html.dark-mode #taskmenu a.compose::before{font-size:24px !important;}
html.dark-mode #taskmenu a.compose:hover{filter:brightness(1.08);background:var(--md-primary-container) !important;}
/* push the special buttons (theme/about/logout) to the bottom, muted */
html.dark-mode #taskmenu .special-buttons{margin-top:auto !important;display:flex;flex-direction:column;align-items:center;gap:2px;}
html.dark-mode #taskmenu .special-buttons a{opacity:.72;}
html.dark-mode #taskmenu .special-buttons a:hover{opacity:1;}

/* ============================================================
   Sidebar (folders)  (#layout-sidebar)
   ============================================================ */
html.dark-mode #layout-sidebar{width:var(--sidebar-w) !important;}
html.dark-mode #layout-sidebar > .header{
  background:var(--md-surface) !important;border:0 !important;
  border-bottom:1px solid var(--md-outline-variant) !important;
  height:56px !important;display:flex;align-items:center;padding:0 8px !important;
}
html.dark-mode #layout-sidebar .header .username{
  font-weight:600 !important;font-size:15px !important;color:var(--md-on-surface) !important;
  margin-left:12px !important;
}
html.dark-mode #layout-sidebar .header .button{color:var(--md-on-surface-variant) !important;}

/* folder list = MD3 navigation drawer */
html.dark-mode #mailboxlist{padding:8px 8px 0 !important;margin:0 !important;}
html.dark-mode #mailboxlist li.mailbox{background:transparent !important;margin:0 !important;}
html.dark-mode #mailboxlist li.mailbox > a{
  box-sizing:border-box !important;display:flex !important;align-items:center !important;
  width:auto !important;min-height:44px !important;height:auto !important;
  margin:2px 0 !important;padding:0 16px !important;
  border:0 !important;border-radius:var(--md-r-full) !important;
  color:var(--md-on-surface-variant) !important;font-size:14px !important;font-weight:500 !important;
  text-align:left !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background-color .13s,color .13s;
}
html.dark-mode #mailboxlist li.mailbox > a::before{display:none !important;}  /* no folder icons (user pref) */
html.dark-mode #mailboxlist li.mailbox:not(.selected) > a:hover{background:var(--md-state-hover) !important;color:var(--md-on-surface) !important;}
html.dark-mode #mailboxlist li.mailbox.selected > a{
  background:var(--md-secondary-container) !important;color:var(--md-on-secondary-container) !important;font-weight:600 !important;
}
/* unread badge as a pill on the right */
html.dark-mode #mailboxlist li .unreadcount{
  margin-left:auto !important;background:var(--md-primary) !important;color:var(--md-on-primary) !important;
  border-radius:var(--md-r-full) !important;padding:1px 8px !important;font-size:12px !important;font-weight:700 !important;
  min-width:18px;text-align:center;
}

/* ============================================================
   Toolbars (.toolbar) — message list header & content header
   ============================================================ */
html.dark-mode .toolbar{
  background:var(--md-surface) !important;border:0 !important;
  border-bottom:1px solid var(--md-outline-variant) !important;
  min-height:56px !important;display:flex !important;align-items:center !important;gap:2px !important;
  justify-content:flex-start !important;padding:0 8px !important;
}
html.dark-mode .toolbar a.button,html.dark-mode .toolbar > a,html.dark-mode .toolbar > .button{
  border-radius:var(--md-r-full) !important;color:var(--md-on-surface-variant) !important;
  min-width:40px !important;height:40px !important;padding:0 10px !important;border:0 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
}
html.dark-mode .toolbar a.button .inner{font-size:11px !important;}
html.dark-mode .toolbar a.button:hover{background:var(--md-state-hover) !important;color:var(--md-on-surface) !important;}
html.dark-mode .toolbar a.button.disabled{opacity:.4 !important;}
/* list header holds the list toolbar — align it to the left, not centered */
html.dark-mode #messagelist-header{justify-content:flex-start !important;padding-left:6px !important;}
/* the list toolbar blends into the surface (no separate plate/border) */
html.dark-mode #toolbar-list-menu{background:transparent !important;border:0 !important;min-height:44px !important;}

/* ============================================================
   Search bar (.searchbar) — single MD3 pill, icons tucked in
   ============================================================ */
html.dark-mode .searchbar{
  background:var(--md-surface-container-high) !important;
  border-radius:var(--md-r-full) !important;border:1px solid transparent !important;
  min-height:48px !important;max-width:760px !important;margin:8px auto !important;
  display:flex !important;align-items:center !important;padding:0 6px 0 16px !important;box-sizing:border-box;
  position:relative;
}
html.dark-mode .searchbar:focus-within{border-color:var(--md-primary) !important;background:var(--md-surface-container) !important;}
html.dark-mode .searchbar form{flex:1 1 auto !important;display:flex;align-items:center;margin:0 !important;}
html.dark-mode .searchbar input,html.dark-mode .searchbar input.no-bs{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  color:var(--md-on-surface) !important;font-size:15px !important;height:44px !important;width:100% !important;
  padding:0 0 0 8px !important;
}
html.dark-mode .searchbar input::placeholder{color:var(--md-on-surface-faint) !important;}
html.dark-mode .searchbar .button{
  flex:0 0 auto !important;width:38px !important;height:38px !important;border-radius:var(--md-r-full) !important;
  color:var(--md-on-surface-variant) !important;border:0 !important;background:transparent !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;margin:0 1px !important;
}
html.dark-mode .searchbar .button:hover{background:var(--md-state-hover) !important;color:var(--md-on-surface) !important;}
html.dark-mode .searchbar .button.search{background:var(--md-primary-container) !important;color:#fff !important;}

/* ============================================================
   Message list — MD3 rounded cards + grid rows
   ============================================================ */
html.dark-mode #messagelist-content,html.dark-mode .messagelist-wrapper{background:var(--md-surface) !important;}
html.dark-mode table.messagelist{
  border-collapse:separate !important;border-spacing:0 6px !important;
  width:100% !important;padding:2px 10px !important;box-sizing:border-box;
}
html.dark-mode table.messagelist thead{display:none !important;}        /* column headers off in list view */
html.dark-mode table.messagelist tbody tr.message{background:transparent !important;}
/* the card body (each visible cell shares the card background) */
html.dark-mode tr.message > td{
  background:var(--md-surface-container-low) !important;border:0 !important;
  vertical-align:middle !important;padding:0 !important;transition:background-color .12s;
}
html.dark-mode tr.message > td.selection,html.dark-mode tr.message > td.threads,
html.dark-mode tr.message > td.flag,html.dark-mode tr.message > td.status,
html.dark-mode tr.message > td.size{display:none !important;}
/* round the card on its first/last VISIBLE cell */
html.dark-mode tr.message > td.subject{border-radius:var(--md-r-md) 0 0 var(--md-r-md) !important;}
html.dark-mode tr.message > td.flags{
  border-radius:0 var(--md-r-md) var(--md-r-md) 0 !important;
  width:40px !important;text-align:center !important;padding-right:8px !important;color:var(--md-on-surface-faint) !important;
}
/* hover / selected card states */
html.dark-mode tr.message:hover > td{background:var(--md-surface-container) !important;}
html.dark-mode tr.message.selected > td,html.dark-mode tr.message.focused > td{
  background:var(--md-secondary-container) !important;color:var(--md-on-secondary-container) !important;
}
html.dark-mode tr.message.selected td.subject .fromto,
html.dark-mode tr.message.selected td.subject .subject,
html.dark-mode tr.message.focused td.subject .fromto,
html.dark-mode tr.message.focused td.subject .subject{color:var(--md-on-secondary-container) !important;}

/* the subject cell becomes the grid: [avatar] [sender] [subject] [date] */
html.dark-mode tr.message td.subject{
  display:grid !important;
  grid-template-columns:40px minmax(110px,188px) 1fr auto !important;
  grid-template-rows:auto !important;grid-auto-rows:0 !important;
  align-items:center !important;column-gap:14px !important;
  padding:9px 14px !important;overflow:hidden;min-height:46px;
}
/* avatar (col 1) drawn from data-avatar + --av-color */
html.dark-mode tr.message td.subject::before{
  content:attr(data-avatar);grid-column:1;grid-row:1;justify-self:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--av-color,var(--md-primary-container));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:15px;line-height:1;
}
html.dark-mode tr.message td.subject .fromto{
  grid-column:2;grid-row:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:600 !important;color:var(--md-on-surface) !important;
}
html.dark-mode tr.message td.subject > .subject{
  grid-column:3;grid-row:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--md-on-surface-variant) !important;
}
html.dark-mode tr.message td.subject > .subject a{color:inherit !important;}
html.dark-mode tr.message td.subject .date{
  grid-column:4;grid-row:1;justify-self:end;white-space:nowrap;
  font-size:12.5px !important;color:var(--md-on-surface-faint) !important;padding-left:8px;
}
html.dark-mode tr.message td.subject .size{display:none !important;}
html.dark-mode tr.message td.subject .msgicon{margin:0 !important;}
/* unread emphasis */
html.dark-mode tr.message.unread td.subject .fromto,
html.dark-mode tr.message.unread td.subject > .subject{color:#fff !important;font-weight:700 !important;}
html.dark-mode tr.message.unread > td.subject{box-shadow:inset 3px 0 0 var(--md-primary);}

/* ============================================================
   Buttons — MD3 filled / tonal
   ============================================================ */
html.dark-mode .btn-primary,html.dark-mode button.primary,html.dark-mode a.button.primary,
html.dark-mode .formbuttons .submit,html.dark-mode #compose-send{
  background:var(--md-primary-container) !important;color:var(--md-on-primary-container) !important;
  border:0 !important;border-radius:var(--md-r-full) !important;font-weight:600 !important;padding:9px 22px !important;
}
html.dark-mode button.secondary,html.dark-mode a.button.btn-secondary,html.dark-mode .button.btn-secondary{
  background:var(--md-surface-container-high) !important;color:var(--md-on-surface) !important;
  border:0 !important;border-radius:var(--md-r-full) !important;
}

/* ============================================================
   Cards / popups / dialogs — MD3 rounded surfaces
   ============================================================ */
html.dark-mode .popupmenu,html.dark-mode .menu.toolbarmenu,html.dark-mode .ui.dialog,
html.dark-mode .uidialog,html.dark-mode .uibox.listbox.contextmenu{
  background:var(--md-surface-container-high) !important;
  border-radius:var(--md-r-lg) !important;border:1px solid var(--md-outline-variant) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.55) !important;
}
html.dark-mode .popupmenu li a,html.dark-mode .toolbarmenu li a{
  border-radius:var(--md-r-sm) !important;margin:1px 6px !important;color:var(--md-on-surface) !important;
}
html.dark-mode .popupmenu li a:hover,html.dark-mode .toolbarmenu li a:hover{background:var(--md-state-hover) !important;}

/* ============================================================
   Message view (reading a mail) — action-show
   ============================================================ */
html.dark-mode body.action-show #layout-content,
html.dark-mode .content.frame-content,
html.dark-mode #messagecontframe,html.dark-mode #messagepartframe{background:var(--md-surface) !important;}
html.dark-mode #message-header{
  background:var(--md-surface-container-low) !important;border-radius:var(--md-r-lg) !important;
  border:1px solid var(--md-outline-variant) !important;margin:14px 16px 10px !important;padding:16px 20px !important;
}
html.dark-mode #message-header h2.subject{
  font-size:20px !important;font-weight:600 !important;color:var(--md-on-surface) !important;
  margin:0 0 10px !important;line-height:1.3 !important;
}
html.dark-mode #message-header .header-summary,
html.dark-mode #message-header .header-content,
html.dark-mode #message-header table.headers-table td{color:var(--md-on-surface-variant) !important;}
html.dark-mode #message-header a{color:var(--md-primary) !important;}
html.dark-mode #messagebody{padding:6px 20px 22px !important;color:var(--md-on-surface) !important;line-height:1.55 !important;}

/* ============================================================
   Forms / login
   ============================================================ */
html.dark-mode #login-form .box-inner,html.dark-mode .login-form{
  background:var(--md-surface-container-low) !important;border-radius:var(--md-r-xl) !important;
  border:1px solid var(--md-outline-variant) !important;
}
html.dark-mode input.form-control,html.dark-mode .ui.input input,html.dark-mode textarea.form-control{
  background:var(--md-surface-container-high) !important;border:1px solid var(--md-outline-variant) !important;
  border-radius:var(--md-r-sm) !important;color:var(--md-on-surface) !important;
}
html.dark-mode input.form-control:focus,html.dark-mode .ui.input input:focus{border-color:var(--md-primary) !important;box-shadow:none !important;}

/* ============================================================
   Footer / pagination
   ============================================================ */
html.dark-mode .footer,html.dark-mode #messagelistfooter,html.dark-mode .pagenav{
  background:var(--md-surface) !important;border-top:1px solid var(--md-outline-variant) !important;
}
html.dark-mode .pagenav a.button,html.dark-mode .footer a.button{
  border-radius:var(--md-r-full) !important;color:var(--md-on-surface-variant) !important;
}
html.dark-mode .pagenav a.button:hover{background:var(--md-state-hover) !important;}

/* ============================================================
   Scrollbars
   ============================================================ */
html.dark-mode *{scrollbar-width:thin;scrollbar-color:var(--md-surface-container-highest) transparent;}
html.dark-mode ::-webkit-scrollbar{width:10px;height:10px;}
html.dark-mode ::-webkit-scrollbar-thumb{background:var(--md-surface-container-highest);border-radius:var(--md-r-full);border:2px solid transparent;background-clip:content-box;}
html.dark-mode ::-webkit-scrollbar-track{background:transparent;}

/* ============================================================
   Layout: full-width feed (Mail.ru style)
   In the list (action-none) the message list fills the whole main
   area and the empty reading pane is hidden. Opening a message
   navigates to action=show, which fills the same area — so the
   message always opens "in place" on the full width.
   ============================================================ */
html.dark-mode body.task-mail.action-none #layout-list{
  flex:1 1 auto !important;width:auto !important;max-width:none !important;
}
html.dark-mode body.task-mail.action-none #layout-content{display:none !important;}

/* ============================================================
   Responsive — narrow / mobile (Elastic layout-small)
   Elastic already swaps to a single panel; just keep our
   components tidy and full-width there.
   ============================================================ */
@media (max-width:768px){
  html.dark-mode .searchbar{margin:8px !important;max-width:none !important;}
  html.dark-mode table.messagelist{padding:2px 6px !important;}
  /* two-line card on narrow screens: avatar | (sender + date) / (subject) */
  html.dark-mode tr.message td.subject{
    grid-template-columns:48px 1fr auto !important;
    grid-template-rows:auto auto !important;grid-auto-rows:auto !important;
    column-gap:12px !important;row-gap:2px !important;padding:9px 12px !important;
  }
  html.dark-mode tr.message td.subject::before{grid-column:1 !important;grid-row:1 / 3 !important;align-self:center !important;}
  html.dark-mode tr.message td.subject .fromto{grid-column:2 !important;grid-row:1 !important;}
  html.dark-mode tr.message td.subject .date{grid-column:3 !important;grid-row:1 !important;font-size:12px !important;}
  html.dark-mode tr.message td.subject > .subject{grid-column:2 / 4 !important;grid-row:2 !important;}
  /* drop the flag/attachment cell on phones; the subject card spans full width */
  html.dark-mode tr.message > td.flags{display:none !important;}
  html.dark-mode tr.message > td.subject{border-radius:var(--md-r-md) !important;}
  /* list toolbar: icons only on phones so the header never overflows */
  html.dark-mode #toolbar-list-menu a.button .inner{display:none !important;}
}