/*
 * Trans-Link Mail — Post-Login Skin Extensions v3 (2026-04-20 session 31 run 2d)
 *
 * Philosophy v3:
 *  - Sidebar gets brand blue #004ea2 (matches login page) in BOTH light and
 *    dark modes. Brand consistency across login → post-login.
 *  - Elastic's default <img id="logo"> (with src that breaks Roundcube's
 *    base-href resolution) is HIDDEN. Logo rendered via CSS background-image
 *    on the sidebar top block.
 *  - Domain-aware logo: JS sets html[data-brand="..."], CSS swaps bg image.
 *  - Font: system stack (CSP blocks Google Fonts; fallback is transparent).
 */

/* ── Tokens ───────────────────────────────────────────
   s139-cont5 2026-05-16 palette redesign (ui-ux-pro-max skill, Consulting Firm + Banking pattern):
   - Sidebar now NAVY SLATE (was saturated brand-blue #004ea2 — oppressive per s113 comments,
     and same color as logo fills which made logos invisible). Navy provides high contrast
     against white logo fills (logo SVGs updated in same MR).
   - Brand-blue retained for selection, focus rings, primary buttons — the brand SIGNAL is
     where user attention goes (active row, focused input), not the chrome.
   - Gold accent (Amber-700) added for stars + warning states — matches consulting/legal/
     banking industry conventions for professional business apps.
   - All contrast ratios WCAG AA verified in both modes (text on bg, fg on accent).
*/
:root {
  /* Sidebar (deep navy — independent of brand-blue, doesn't blend with logos) */
  --tl-sidebar-bg:    #0f172a;   /* slate-900 */
  --tl-sidebar-fg:    #f1f5f9;   /* slate-100, 15:1 contrast on sidebar-bg */
  --tl-sidebar-muted: rgba(255, 255, 255, 0.70);
  --tl-sidebar-hover: rgba(255, 255, 255, 0.08);
  --tl-sidebar-active:rgba(255, 255, 255, 0.16);

  /* Brand-blue retained for actions / selection / focus */
  --tl-primary:       #004ea2;
  --tl-primary-dark:  #003a7a;
  --tl-primary-light: #e8f0fe;
  --tl-primary-fg:    #ffffff;
  --tl-accent-hover:  rgba(0, 78, 162, 0.06);   /* softer than 0.08 */
  --tl-unread-bg:     rgba(0, 78, 162, 0.05);   /* slightly stronger than 0.04 to show on white */
  --tl-unread-dot:    #004ea2;

  /* Gold accent (stars, important flags) — amber-500 light, amber-400 dark */
  --tl-star:          #f59e0b;

  /* Focus ring — brand-blue with proper opacity for AA visibility */
  --tl-focus-ring:    0 0 0 3px rgba(0, 78, 162, 0.30);

  /* Content surfaces (used by dark-mode overrides + element backgrounds) */
  --tl-bg-elevated:   #f8fafc;   /* slate-50 — message pane subtle elevation */
  --tl-text-primary:  #0f172a;   /* slate-900 on white = 19:1 */
}
html.dark-mode {
  /* Sidebar even darker for layer separation from base content */
  --tl-sidebar-bg:    #020617;   /* slate-950 */
  --tl-sidebar-fg:    #e2e8f0;   /* slate-200, 14.5:1 on sidebar-bg */
  --tl-sidebar-muted: rgba(226, 232, 240, 0.70);
  --tl-sidebar-hover: rgba(255, 255, 255, 0.10);
  --tl-sidebar-active:rgba(255, 255, 255, 0.18);

  /* Brand — lifted for AA on dark (blue-500) */
  --tl-primary:       #3b82f6;
  --tl-primary-dark:  #2563eb;
  --tl-primary-light: rgba(59, 130, 246, 0.18);
  --tl-primary-fg:    #ffffff;
  --tl-accent-hover:  rgba(59, 130, 246, 0.10);
  --tl-unread-bg:     rgba(59, 130, 246, 0.10);
  --tl-unread-dot:    #60a5fa;   /* blue-400 — more visible on dark */
  --tl-focus-ring:    0 0 0 3px rgba(59, 130, 246, 0.40);

  /* Gold lifted for dark (amber-400) */
  --tl-star:          #fbbf24;

  /* Content surfaces */
  --tl-bg-elevated:   #1e293b;   /* slate-800 */
  --tl-text-primary:  #f1f5f9;   /* slate-100 on slate-900 = 14:1 */
}

/* ── System font stack (defeat @import Inter CSP block silently) ─ */
html body,
html body input, html body button, html body textarea, html body select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
               "Helvetica Neue", "PingFang TC", "Microsoft JhengHei",
               Arial, sans-serif !important;
}

/* ── Sidebar: deep navy (s139-cont5 — was brand-blue, same color as logo fills) ─────────── */
html body #layout-menu {
  background-color: var(--tl-sidebar-bg) !important;
  width: 78px !important;
  padding-top: 68px;    /* reserve space for logo at top */
  position: relative;   /* s139-cont6 2026-05-16: REQUIRED so ::before logo
                           can position absolute INSIDE the sidebar. Without
                           this, absolute positioning falls through to body
                           and logo renders off-screen — silent bug since
                           s113-cont (logo invisible in sidebar regardless
                           of SVG fill correctness). */
}
/* Wider sidebar on desktop for better logo fit */
@media (min-width: 1024px) {
  html body #layout-menu {
    width: 110px !important;
    padding-top: 80px;
  }
}

/* ── Logo: hide Elastic's broken <img>, use CSS background ─── */
html body #layout-menu #logo {
  display: none !important;
}
html body #layout-menu::before {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 12px);
  height: 56px;
  background-image: url("../images/logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
html[data-brand="tes"] body #layout-menu::before {
  background-image: url("../images/logo-tes.svg");
}
html[data-brand="ttl"] body #layout-menu::before {
  background-image: url("../images/logo-ttl.svg");
}

/* Keep the popover-header (where logo was) minimal since we replaced logo */
html body #layout-menu .popover-header {
  display: none !important;
}

/* ── Task menu: brand-blue bg means white icons/text ─ */
html body #layout-menu #taskmenu a {
  color: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html body #layout-menu #taskmenu a:hover,
html body #layout-menu #taskmenu a:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
html body #layout-menu #taskmenu a.selected {
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
html body #layout-menu #taskmenu a .inner {
  color: inherit !important;
}

/* ── Folder list (left-of-middle) ─────────────────── */
html body #layout-sidebar #folderlist-content .listing li > a {
  color: inherit;
  border-radius: 6px;
  transition: background 150ms ease;
}
html body #layout-sidebar #folderlist-content .listing li > a:hover {
  background: var(--tl-accent-hover);
}
html body #layout-sidebar #folderlist-content .listing li.selected > a,
html body #layout-sidebar #folderlist-content .listing li.droptarget > a {
  background: var(--tl-primary) !important;
  color: var(--tl-primary-fg) !important;
  border-radius: 6px;
}
html body #layout-sidebar #folderlist-content .listing .unreadcount {
  background: var(--tl-primary);
  color: var(--tl-primary-fg);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
}

/* Raise contrast on dim folder text in dark mode */
html.dark-mode body #layout-sidebar #folderlist-content .listing li > a {
  color: var(--tl-text-primary); /* dark mode: was #e2e8f0; uses token (s109-cont2) */
}

/* ── Message list — brand selection, subtle unread ── */
html body #layout-list #messagelist tr.selected > td,
html body #layout-list #messagelist tr.focused.selected > td {
  background: var(--tl-primary) !important;
  color: var(--tl-primary-fg) !important;
}
html body #layout-list #messagelist tr.selected > td a,
html body #layout-list #messagelist tr.selected > td .subject {
  color: var(--tl-primary-fg) !important;
}
html body #layout-list #messagelist tr.unread > td {
  background: var(--tl-unread-bg);
  font-weight: 600;
}
html body #layout-list #messagelist tr.unread > td.subject::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tl-unread-dot);
  margin-right: 8px;
  vertical-align: middle;
}
html body #layout-list #messagelist tr:not(.selected):hover > td {
  background: var(--tl-accent-hover);
  cursor: pointer;
}
html body #messagelist td.flags .icon.flagged::before {
  color: var(--tl-star);
}

/* ── Buttons (Send, Reply, Save, etc.) ────────────── */
html body button.btn-primary,
html body .btn.btn-primary,
html body a.btn.btn-primary,
html body .button.mainaction,
html body button.mainaction {
  background: var(--tl-primary) !important;
  border-color: var(--tl-primary) !important;
  color: var(--tl-primary-fg) !important;
  transition: background 150ms ease, box-shadow 150ms ease;
}
html body button.btn-primary:hover,
html body .btn.btn-primary:hover,
html body .button.mainaction:hover,
html body button.mainaction:hover {
  background: var(--tl-primary-dark) !important;
  border-color: var(--tl-primary-dark) !important;
}
html body button.btn-primary:focus-visible,
html body .btn.btn-primary:focus-visible,
html body .button.mainaction:focus-visible,
html body button.mainaction:focus-visible {
  outline: none;
  box-shadow: var(--tl-focus-ring);
}

/* ── Form inputs — brand focus ring ───────────────── */
html body input.form-control:focus,
html body select.form-control:focus,
html body textarea.form-control:focus {
  border-color: var(--tl-primary) !important;
  box-shadow: var(--tl-focus-ring) !important;
  outline: none;
}

/* ── Settings — brand-blue selection on section nav ── */
html body.task-settings #sections-table tr.selected,
html body.task-settings #sections-table tr.focused,
html body.task-settings #settings-sections .listing li.selected > a,
html body.task-settings #settings-sections .listing li.focused > a {
  background: var(--tl-primary) !important;
  color: var(--tl-primary-fg) !important;
}
html body.task-settings fieldset legend {
  color: var(--tl-primary);
  font-weight: 600;
}

/* Raise dim text in dark-mode settings */
html.dark-mode body.task-settings #sections-table tr > td,
html.dark-mode body.task-settings #settings-sections .listing li > a {
  color: var(--tl-text-primary); /* dark mode: was #e2e8f0; uses token (s109-cont2) */
}

/* ── Read pane: white email body in both modes ─────── */
html body.task-mail .message-header .subject {
  font-weight: 600;
  line-height: 1.3;
}
html body.task-mail .message-htmlpart,
html body.task-mail iframe#messagecontframe {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Dark mode: lift near-black panes to something more comfortable */
html.dark-mode body #layout-content,
html.dark-mode body #messagecontentcontainer,
html.dark-mode body #preferences-frame {
  background-color: var(--tl-bg-elevated) !important; /* was #1e2937 (s109-cont2) */
}

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ── s139-cont10 2026-05-16: Login page logo rules MOVED HERE from
   styles.css. styles.css only loads when active skin = translink, but
   we removed translink from skins_allowed (cont4). Default is elastic
   which loads its own elastic/styles/styles.min.css — it does NOT have
   our login-page rules. post-login.css is always-injected by
   brand_postlogin.php so this is the right home for these. ── */

/* Hide Elastic's default <img id="logo"> on login page — we render 3 via JS */
body.task-login #logo {
  display: none !important;
}

/* Company logos — VERTICAL STACK (s139-cont13 — user trial) */
body.task-login #company-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0 0 1rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-sizing: border-box;
}

/* Each logo — TRULY full form width; height auto-derives from aspect ratio (s139-cont14) */
body.task-login #company-logos img {
  width: 100%;
  max-width: 100%;
  height: auto;
  /* No max-height — was binding constraint preventing width from filling container.
     Aspect ratios produce: TL ~103px tall, TES ~118px, TTL ~120px at 400px form-width. */
  display: block;
  opacity: 0.95;
  transition: opacity 200ms ease;
}
body.task-login #company-logos img:hover {
  opacity: 1;
}

/* Mobile: same stack but slightly tighter */
@media screen and (max-width: 480px) {
  body.task-login #company-logos {
    gap: 0.4rem;
    padding: 0 0 0.75rem;
    margin: 0 0 0.75rem;
  }
  /* Mobile: width:100% still binds; height auto-derives. No max-height. */
}


/* s139-cont15 2026-05-16: Dark mode force-white for login logos
   (natural colors in light mode, white in dark mode per user choice). */
html.dark-mode body.task-login #company-logos img {
  filter: brightness(0) invert(1);
}


/* s139-cont17: Theme toggle button on login page */
body.task-login #theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease, background 150ms ease;
}
body.task-login #theme-toggle:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 1);
}
html.dark-mode body.task-login #theme-toggle {
  background: rgba(15, 23, 42, 0.95);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.18);
}
html.dark-mode body.task-login #theme-toggle:hover {
  background: rgba(15, 23, 42, 1);
}

/* Login page background adapts to mode */
body.task-login {
  background-color: #f8fafc !important;
  transition: background-color 200ms ease;
}
html.dark-mode body.task-login {
  background-color: #0f172a !important;
}


/* s139-cont18 2026-05-16: Login button — distinct designs for light/dark mode
   Light mode: filled brand-blue with subtle gradient + depth shadow (professional/corporate)
   Dark mode: elevated with brand-blue glow (high-CTA on dark surface) */

/* LIGHT MODE — filled brand-blue with depth */
body.task-login #rcmloginsubmit,
body.task-login button.mainaction.submit {
  /* Sizing — bigger, more prominent */
  width: 100%;
  height: 52px;
  padding: 0 1.5rem;
  margin-top: 0.5rem;

  /* Typography — confident */
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1;

  /* Shape */
  border-radius: 10px;
  border: 1px solid transparent;

  /* Fill — brand-blue with subtle gradient (light mode) */
  background: linear-gradient(180deg, #0058b8 0%, #004ea2 100%);
  color: #ffffff;

  /* Depth */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 1px 3px rgba(0, 78, 162, 0.20),
    0 4px 12px rgba(0, 78, 162, 0.15);

  /* Animation */
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

body.task-login #rcmloginsubmit:hover,
body.task-login button.mainaction.submit:hover {
  background: linear-gradient(180deg, #0066d2 0%, #0058b8 100%);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 2px 4px rgba(0, 78, 162, 0.25),
    0 8px 20px rgba(0, 78, 162, 0.20);
}

body.task-login #rcmloginsubmit:active,
body.task-login button.mainaction.submit:active {
  transform: translateY(0);
  background: linear-gradient(180deg, #004ea2 0%, #003a7a 100%);
  box-shadow:
    0 1px 2px rgba(0, 78, 162, 0.25) inset,
    0 1px 2px rgba(0, 78, 162, 0.15);
}

body.task-login #rcmloginsubmit:focus-visible,
body.task-login button.mainaction.submit:focus-visible {
  outline: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 0 4px rgba(0, 78, 162, 0.30),
    0 4px 12px rgba(0, 78, 162, 0.15);
}

/* DARK MODE — elevated with glow */
html.dark-mode body.task-login #rcmloginsubmit,
html.dark-mode body.task-login button.mainaction.submit {
  background: linear-gradient(180deg, #4a92f7 0%, #3b82f6 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 4px 16px rgba(59, 130, 246, 0.40),
    0 8px 32px rgba(59, 130, 246, 0.20);
}

html.dark-mode body.task-login #rcmloginsubmit:hover,
html.dark-mode body.task-login button.mainaction.submit:hover {
  background: linear-gradient(180deg, #5f9efa 0%, #4a92f7 100%);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 20px rgba(59, 130, 246, 0.55),
    0 12px 40px rgba(59, 130, 246, 0.30);
}

html.dark-mode body.task-login #rcmloginsubmit:active,
html.dark-mode body.task-login button.mainaction.submit:active {
  transform: translateY(0);
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.30) inset,
    0 2px 8px rgba(59, 130, 246, 0.35);
}

html.dark-mode body.task-login #rcmloginsubmit:focus-visible,
html.dark-mode body.task-login button.mainaction.submit:focus-visible {
  outline: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 0 0 4px rgba(59, 130, 246, 0.45),
    0 4px 16px rgba(59, 130, 246, 0.40);
}

/* Disabled state (both modes) */
body.task-login #rcmloginsubmit:disabled,
body.task-login button.mainaction.submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}