/* ============================================================
   Ola enterprise overlay for Zulip 12  —  chat.ola.in
   De-purple → professional Slack-adjacent blue (#1971c2 family)
   Approach: override Zulip's --color-* theme variables at :root
   so the recolor is coherent app-wide. Injected at bastion nginx;
   Zulip source untouched / upgrade-safe.
   ============================================================ */

:root {
  /* Ola professional accent (calm Slack-blue) */
  --ola-blue:        #1971c2;
  --ola-blue-hover:  #1864ab;
  --ola-blue-active: #145591;
  --ola-blue-lt:     #9cc5ef;   /* accent for dark theme text/icons */
  --ola-radius: 5px;
}

:root {
  /* ---- Primary / brand SOLID action buttons (e.g. "Yes, please!") ---- */
  --color-background-brand-solid-action-button:        light-dark(var(--ola-blue), var(--ola-blue));
  --color-background-brand-solid-action-button-hover:  light-dark(var(--ola-blue-hover), var(--ola-blue-hover));
  --color-background-brand-solid-action-button-active: light-dark(var(--ola-blue-active), var(--ola-blue-active));
  --color-background-animated-button-hover:            var(--ola-blue-hover);
  --color-box-shadow-animated-purple-button-focus:     light-dark(hsl(211deg 40% 20%), hsl(0deg 0% 100% / 66%));

  /* ---- Compose "Send" button ---- */
  --color-compose-send-button-background:              var(--ola-blue);
  --color-compose-send-button-background-interactive:  var(--ola-blue-hover);
  --color-compose-send-control-button:                 light-dark(var(--ola-blue), var(--ola-blue-lt));
  --color-compose-send-control-button-interactive:     light-dark(var(--ola-blue-hover), hsl(211deg 45% 72%));
  --color-compose-send-control-button-background-interactive: light-dark(hsl(211deg 100% 30% / 5%), hsl(211deg 80% 60% / 11%));
  --color-compose-embedded-button-background-hover:    light-dark(hsl(211deg 70% 90% / 50%), hsl(211deg 70% 60% / 11%));
  --color-compose-embedded-button-background-interactive: light-dark(hsl(211deg 70% 90% / 90%), hsl(211deg 70% 60% / 20%));

  /* ---- Brand TEXT / ICON accents (links, icon buttons, banners) ---- */
  --color-text-brand-subtle-action-button:        light-dark(var(--ola-blue-active), var(--ola-blue-lt));
  --color-text-brand-text-action-button:          light-dark(var(--ola-blue), var(--ola-blue-lt));
  --color-text-brand-banner:                      light-dark(var(--ola-blue-active), var(--ola-blue-lt));
  --color-text-brand-icon-button:                 light-dark(var(--ola-blue), var(--ola-blue-lt));
  --color-text-brand-icon-button-hover:           light-dark(var(--ola-blue-hover), var(--ola-blue-lt));
  --color-text-brand-icon-button-active:          light-dark(var(--ola-blue-active), var(--ola-blue-lt));
  --color-text-brand-icon-button-square-active:   light-dark(var(--ola-blue), var(--ola-blue-lt));
  --color-icon-purple:                            light-dark(#4a7fb5, #7ba7d4);

  /* ---- Brand SUBTLE / soft backgrounds behind those buttons ---- */
  --color-background-brand-subtle-action-button:         color-mix(in oklch, var(--ola-blue) 12%, transparent);
  --color-background-brand-subtle-action-button-hover:   color-mix(in oklch, var(--ola-blue) 17%, transparent);
  --color-background-brand-subtle-action-button-active:  color-mix(in oklch, var(--ola-blue) 22%, transparent);
  --color-background-brand-text-action-button-hover:     color-mix(in oklch, var(--ola-blue) 8%, transparent);
  --color-background-brand-text-action-button-active:    color-mix(in oklch, var(--ola-blue) 14%, transparent);
  --color-background-brand-icon-button-square-hover:     color-mix(in oklch, var(--ola-blue) 8%, transparent);
  --color-background-brand-icon-button-square-active:    color-mix(in oklch, var(--ola-blue) 14%, transparent);
  --color-border-brand-banner:      color-mix(in oklch, var(--ola-blue) 40%, transparent);
  --color-background-brand-banner:  light-dark(hsl(211deg 52% 94%), hsl(211deg 42% 15%));

  /* ---- @-mention highlights (keep readable, blue not purple) ---- */
  --color-background-direct-mention:            light-dark(hsl(211deg 52% 95%), hsl(211deg 20% 16%));
  --color-background-text-direct-mention:       light-dark(hsl(211deg 70% 70% / 20%), hsl(211deg 52% 60% / 25%));
  --color-background-text-hover-direct-mention: light-dark(hsl(211deg 70% 70% / 30%), hsl(211deg 52% 60% / 45%));
  --color-text-self-direct-mention:             light-dark(hsl(211deg 55% 40%), hsl(211deg 100% 85%));

  /* ---- Search / recipient input pills (were lavender 237deg) ---- */
  --color-background-input-pill:        light-dark(hsl(211deg 60% 92%), hsl(211deg 55% 55% / 38%));
  --color-background-input-pill-search: light-dark(hsl(211deg 60% 92%), hsl(211deg 55% 55% / 30%));
  --color-background-input-pill-hover:  light-dark(hsl(211deg 70% 70% / 25%), hsl(211deg 52% 60% / 40%));
  --color-outline-low-attention-input-pill: light-dark(hsl(211deg 60% 85%), hsl(211deg 55% 55% / 22%));
  --color-border-input-pill-image:      light-dark(hsl(211deg 60% 92% / 50%), hsl(211deg 55% 55% / 60%));
  --color-input-pill-close:             light-dark(hsl(211deg 45% 50%), hsl(211deg 45% 72%));
  --color-focus-outline-input-pill:     light-dark(hsl(211deg 55% 45%), hsl(0deg 0% 100% / 60%));

  /* ---- Stream-group checkboxes ---- */
  --color-stream-group-row-checked-icon:          var(--ola-blue);
  --color-stream-group-row-checked-icon-hover:    var(--ola-blue-hover);
  --color-stream-group-row-checked-icon-disabled: light-dark(hsl(211deg 60% 60%), hsl(211deg 60% 60% / 50%));

  /* ---- "Show more/less" quoted-content button (was purple) ---- */
  --color-text-show-more-less-button:              light-dark(var(--ola-blue), var(--ola-blue-lt));
  --color-show-more-less-button-background:        color-mix(in oklch, var(--ola-blue) 8%, transparent);
  --color-show-more-less-button-background-hover:  color-mix(in oklch, var(--ola-blue) 14%, transparent);
  --color-show-more-less-button-background-active: color-mix(in oklch, var(--ola-blue) 20%, transparent);

  /* ---- Sidebar hover / navigation (kill the lavender wash) ---- */
  --color-background-sidebar-action-hover:          light-dark(hsl(210deg 16% 90%), hsl(210deg 14% 30%));
  --color-sidebar-action-hover:                     light-dark(hsl(211deg 55% 30%), hsl(210deg 40% 88%));
  --color-text-sidebar-action-heading-hover:        light-dark(hsl(211deg 55% 30%), hsl(210deg 40% 88%));
  --color-background-sidebar-action-heading-hover:  color-mix(in oklch, var(--ola-blue) 8%, transparent);
  --color-background-navigation-item-hover:         color-mix(in oklch, var(--ola-blue) 8%, transparent);
  --color-left-sidebar-outer-box-shadow-hover:      color-mix(in oklch, var(--ola-blue) 8%, transparent);
  --color-left-sidebar-middle-box-shadow-hover:     light-dark(hsl(211deg 30% 91%), hsl(210deg 15% 24%));
  --color-modal-selectable-icon-hover:              light-dark(hsl(211deg 55% 30%), hsl(210deg 40% 88%));

  /* ---- Neutralize the slightly-purple (240deg) slate icons → true slate ---- */
  --color-navbar-icon:                    light-dark(hsl(215deg 16% 46%), hsl(215deg 12% 62%));
  --color-left-sidebar-navigation-icon:   light-dark(hsl(215deg 16% 42%), hsl(215deg 12% 62%));
  --color-sidebar-action:                 light-dark(hsl(215deg 16% 42%), hsl(215deg 12% 62%));
  --color-text-sidebar-action-heading:    light-dark(hsl(215deg 16% 42%), hsl(215deg 12% 62%));
  --color-left-sidebar-dm-partners-icon:  light-dark(hsl(215deg 16% 55%), hsl(215deg 14% 56%));
  --color-modal-selectable-icon:          light-dark(hsl(215deg 16% 42%), hsl(215deg 12% 62%));
  --color-vdots-visible:                  light-dark(hsl(215deg 16% 42%), hsl(215deg 14% 66%));
  --color-vdots-hint:                     light-dark(hsl(215deg 14% 78%), hsl(215deg 14% 40%));
  --color-vdots-hover:                    light-dark(hsl(211deg 55% 25%), hsl(210deg 40% 88%));

  /* ---- Spectator / navbar brand buttons (login CTA area) ---- */
  --color-navbar-spectator-low-attention-brand-button-text:    light-dark(var(--ola-blue), var(--ola-blue-lt));
  --color-navbar-spectator-medium-attention-brand-button-text: light-dark(var(--ola-blue), var(--ola-blue-lt));
}

/* ============================================================
   Structural polish — flatter, calmer, enterprise chrome
   ============================================================ */

/* System font stack (drops Zulip's rounded default feel) */
body, .message_content, .rendered_markdown,
input, textarea, button, select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
}

/* Flatten playful radii on controls */
.btn, button, input, textarea, select,
.dropdown-menu, .popover, .modal__container, .modal-bg,
.compose-send-button, #compose-send-button,
.input-pill, .pill { border-radius: var(--ola-radius) !important; }

/* Replace the default purple ZULIP wordmark with a clean "Ola" wordmark.
   (Org can later upload a real logo via admin settings; this is the
   until-then de-Zulip fix.) */
#realm-navbar-wide-logo,
img.nav-logo,
img#realm-navbar-narrow-logo { display: none !important; }
a.brand.no-style {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px;
  text-decoration: none !important;
}
a.brand.no-style::after {
  content: "Ola";
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: light-dark(#1f2430, #e7eaf0);
}

/* Softer, flatter top navbar */
#navbar-fixed-container, .header, .header-main {
  box-shadow: none !important;
}

/* ============================================================
   Left sidebar → Mattermost "Denim" navy (identical in BOTH themes)
   Values are plain colors (NOT light-dark) so the navy sidebar is
   consistent regardless of the user's light/dark preference.
   ============================================================ */
:root {
  /* Denim palette */
  --denim-sidebar:        #1e325c;  /* channel-list bg            */
  --denim-teambar:        #14213e;  /* far-left / deepest navy    */
  --denim-header:         #192a4d;  /* sidebar header             */
  --denim-row-hover:      #28427b;  /* hover + active row bg      */
  --denim-active-accent:  #5d89ea;  /* left active-border accent  */
  --denim-text:           hsl(0deg 0% 100% / 72%); /* idle text    */
  --denim-text-strong:    #ffffff;  /* active/unread text         */
  --denim-online:         #3db887;  /* presence dot               */

  /* Truly-global Denim touches (safe app-wide, both themes) */
  --color-unread-marker:      #cc8f00;   /* new-message separator line   */
  --color-user-circle-active: #3db887;   /* online presence dot          */
  --color-background-text-direct-mention:       hsl(44deg 100% 72% / 35%); /* @-mention wash */
  --color-background-text-hover-direct-mention: hsl(44deg 100% 72% / 55%);
}

/* ---- Denim variables SCOPED to the left column only ----
   Redefining these custom properties on #left-sidebar keeps the
   white-on-navy text/hover/badge treatment INSIDE the channel list,
   so the right-hand buddy list (which shares some "sidebar" vars but
   sits on a light/dark content bg) keeps its native readable colors. */
#left-sidebar {
  /* Selected channel/view row → subtle navy highlight, white text (both modes) */
  --color-background-active-narrow-filter: var(--denim-row-hover);
  --color-text-active-narrow-filter:       var(--denim-text-strong);
  --color-background-hover-narrow-filter:  var(--denim-row-hover);
  --color-background-button-inbox-selected: var(--denim-row-hover);

  /* Sidebar TEXT — white-on-navy in both themes */
  --color-text-sidebar-base:               var(--denim-text-strong);
  --color-text-sidebar-row:                var(--denim-text);
  --color-text-sidebar-heading:            hsl(0deg 0% 100% / 62%);
  --color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 100% / 85%);
  --color-recent-view-link-unread:         var(--denim-text-strong);

  /* Sidebar ICONS & action headings (VIEWS caret, CREATE A CHANNEL, DM +) */
  --color-sidebar-action:                  var(--denim-text);
  --color-text-sidebar-action-heading:     var(--denim-text);
  --color-left-sidebar-navigation-icon:    var(--denim-text);
  --color-left-sidebar-dm-partners-icon:   var(--denim-text);
  --color-stream-group-row-plus-icon:      hsl(0deg 0% 100% / 55%);

  /* Sidebar HOVER states → same Denim hover navy, brighten text */
  --color-background-sidebar-action-hover: var(--denim-row-hover);
  --color-sidebar-action-hover:            var(--denim-text-strong);
  --color-text-sidebar-action-heading-hover: var(--denim-text-strong);
  --color-background-sidebar-action-heading-hover: var(--denim-row-hover);
  --color-left-sidebar-follow-icon-hover:  var(--denim-text-strong);

  /* Unread badge → white pill w/ navy number (Denim) */
  --color-background-unread-counter:          var(--denim-text-strong);
  --color-background-unread-counter-prominent: var(--denim-text-strong);
  --color-background-unread-counter-no-alpha: var(--denim-text-strong);
  --color-unread-counter-normal:              var(--denim-sidebar);
  --color-unread-counter-prominent:           var(--denim-sidebar);
  --color-unread-counter-quiet:               hsl(0deg 0% 100% / 60%);
  --color-background-unread-counter-dot:      var(--denim-text-strong);

  /* Sidebar dividers / borders on navy */
  --color-border-sidebar:                  hsl(0deg 0% 100% / 12%);
  --color-border-sidebar-subheader:        hsl(0deg 0% 100% / 15%);
  --color-left-sidebar-direct-messages-bottom-divider: hsl(0deg 0% 100% / 15%);
  --color-topic-indent-border:             hsl(0deg 0% 100% / 22%);
}

/* Force the Denim navy background on the whole left column (both themes).
   Plain color, no light-dark(), so light-mode users also get navy. */
#left-sidebar,
.left-sidebar,
#left_sidebar_scroll_container {
  background: var(--denim-sidebar) !important;
}
/* Sidebar header strip (filter box + new-channel row) a touch deeper */
#left-sidebar .left-sidebar-header,
#left-sidebar #left-sidebar-filter-container,
#left-sidebar .sidebar-header {
  background: var(--denim-header) !important;
}
/* "Filter left sidebar" search input: translucent-white field on navy */
#left-sidebar input#filter_streams,
#left-sidebar .filter_text_input,
#left-sidebar input[type="text"] {
  background: hsl(0deg 0% 100% / 10%) !important;
  color: var(--denim-text-strong) !important;
  border-color: hsl(0deg 0% 100% / 18%) !important;
}
#left-sidebar input::placeholder { color: hsl(0deg 0% 100% / 55%) !important; }
/* Sticky section headers (VIEWS / DIRECT MESSAGES) ship a hardcoded light-grey
   bg that reads as a pale band on navy — blend them into the sidebar. */
#left-sidebar #direct-messages-section-header,
#left-sidebar .left-sidebar-section-header,
#left-sidebar #views-label-container,
#left-sidebar #streams_header {
  background: var(--denim-sidebar) !important;
}

/* Dialog / onboarding primary buttons ("Got it", "Confirm", "Save")
   use a HARDCODED purple in Zulip's bundle (not a theme variable),
   so they must be overridden by selector. */
.dialog_submit_button,
.animated-purple-button,
button.animated-purple-button {
  background-color: var(--ola-blue) !important;
  background-image: none !important;
  border-color: var(--ola-blue) !important;
}
.dialog_submit_button:hover,
.animated-purple-button:hover {
  background-color: var(--ola-blue-hover) !important;
}

/* Slack-style accent bar on the active sidebar row */
#left-sidebar .active-filter,
#left-sidebar .active-sub-filter,
#left-sidebar li.active_narrow_filter,
#left-sidebar .selected-home-view,
#left-sidebar li.top_left_row.active-filter {
  box-shadow: inset 3px 0 0 0 var(--denim-active-accent) !important;
}

/* ===== OLA-LOGIN-HARDEN: SSO-only login page (hide email login + signup) ===== */
#login-page #login_form,
#login-page .or,
#login-page .signup-link-wrapper,
#login-page .signup-form,
#login-page .contact-admin,
#login-page .invite-hint,
.portico-header a[href="/register/"] { display: none !important; }
#login-page .login-social { margin-top: 0 !important; }

/* ===== OLA-LOGIN-HARDEN v2: SSO-only login (correct .login-page scope) ===== */
.login-page #login_form,
.login-page .or,
.signup-link-wrapper,
.signup-form,
.contact-admin,
.portico-header a[href="/register/"] { display: none !important; }
.login-page .login-social { margin-top: 0 !important; }

/* ===== OLA-SIDEBAR-CONTRAST: readable channel/DM/topic names on navy sidebar ===== */
#left-sidebar .stream-name,
#left-sidebar .conversation-partners-list,
#left-sidebar .empty-list-message,
#left-sidebar .dm-name,
#left-sidebar .topic-name,
#left-sidebar .topic-name a { color: rgba(255,255,255,0.92) !important; }
#left-sidebar .stream-name { opacity: 1 !important; }