/* ============================================================
   Zvario Mail — SOGo white-label theme override
   Recolors SOGo's default teal/green Material palette to the
   zvario.com brand palette. Injected into every SOGo HTML page
   via nginx sub_filter (see mail.zvariocloud.com vhost).

   Brand palette:
     Primary blue   #0098F0  rgb(0,152,240)
     Orange accent  #f97316  rgb(249,115,22)
     Dark navy      #1a2234 / #1e293b
     White          #fff

   SOGo default palette being replaced (Material "default" theme):
     Primary teal     rgb(77,128,128)   #4D8080
     Primary light    rgb(142,191,187)
     Primary lighter  rgb(125,179,176)
     Primary lightest rgb(225,245,243)
     Primary hue-1    rgb(178,214,211)
     Focus ring       rgb(206,235,232)

   Strategy: high-specificity !important overrides keyed off the
   Angular-Material selectors that carry the teal. Because Angular
   Material injects its generated theme <style> at runtime, every
   rule here uses !important so the brand color always wins
   regardless of source order.
   ============================================================ */

/* ---- 1. Primary surfaces (toolbars, login panel, headers) ---- */
md-toolbar:not(.md-menu-toolbar),
md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar.md-default-theme.md-menu-toolbar md-toolbar-filler,
md-toolbar.md-menu-toolbar md-toolbar-filler,
md-toolbar > md-nav-bar > .md-nav-bar,
md-toolbar > md-nav-bar.md-default-theme > .md-nav-bar,
md-toolbar > md-tabs > md-tabs-wrapper,
md-toolbar > md-tabs.md-default-theme > md-tabs-wrapper {
  background-color: #0098F0 !important;
  color: #fff !important;
}

/* ---- Login screen: WHITE form panel (2026-06-10 fix) ----
   The right-hand panel (.sg-login) holds the username/password/login
   form (.sg-login-content). It MUST be plain white with dark text so
   the input fields are readable. (A prior pass made it navy #1a2234,
   which hid the inputs.) Force white bg + dark text everywhere in the
   form panel; keep orange submit + blue accents which read on white. */
#loginScreen,
.sg-login,
.sg-login.md-default-theme.md-bg,
sg-login,
.sg-login-content,
md-card.sg-login-content,
.md-login-window {
  background-color: #fff !important;
  color: #1a2234 !important;
}

/* Form text: labels, input values, hint/placeholder, icons -> dark */
.sg-login-content,
.sg-login-content .md-input,
.sg-login-content input,
.sg-login-content label,
.sg-login-content md-input-container label,
.sg-login-content .md-input-container label,
.sg-login-content md-select .md-select-value,
.sg-login-content .md-select-value {
  color: #1a2234 !important;
}
.sg-login-content input::placeholder { color: #64748b !important; }
/* Field icons (person / vpn_key / visibility) -> muted slate, not white */
.sg-login-content md-icon,
.sg-login-content md-input-container md-icon {
  color: #475569 !important;
}
/* Input underline default (unfocused) -> light slate so the field reads */
.sg-login-content md-input-container .md-input {
  border-bottom-color: #cbd5e1 !important;
}
/* Links inside the form (forgot pw, etc.) -> brand blue on white */
.sg-login-content a { color: #0098F0 !important; }

/* ---- 2. Raised / FAB primary buttons (submit, login arrow) ---- */
.md-button.md-default-theme.md-primary.md-raised,
.md-button.md-primary.md-raised,
.md-button.md-default-theme.md-primary.md-fab,
.md-button.md-primary.md-fab,
.md-primary.md-fab,
button.md-primary.md-raised,
button.md-fab {
  background-color: #0098F0 !important;
  color: #fff !important;
}
.md-button.md-default-theme.md-primary.md-raised:not([disabled]):hover,
.md-button.md-primary.md-raised:not([disabled]):hover,
.md-button.md-default-theme.md-primary.md-fab:not([disabled]):hover,
.md-button.md-primary.md-fab:not([disabled]):hover,
.md-button.md-primary.md-raised:not([disabled]).md-focused,
.md-button.md-primary.md-fab:not([disabled]).md-focused {
  background-color: #007fce !important;
}

/* Submit-arrow icon button (the login "go" arrow) -> orange accent */
.sg-login-content .md-button.md-icon-button md-icon,
.sg-login .md-fab md-icon,
md-icon.md-primary {
  color: #f97316 !important;
}
.sg-login-content .md-fab,
.md-login-window .md-fab {
  background-color: #f97316 !important;
}
.sg-login-content .md-fab:not([disabled]):hover,
.md-login-window .md-fab:not([disabled]):hover {
  background-color: #ea670c !important;
}

/* ---- 3. Primary text / links / icons ---- */
._md a:not(.md-button).md-primary,
._md a.md-default-theme:not(.md-button).md-primary,
.md-button.md-default-theme.md-primary:not([disabled]) md-icon,
.md-button.md-primary:not([disabled]) md-icon,
.md-default-theme .md-primary,
.md-primary {
  color: #0098F0 !important;
}
._md a:not(.md-button).md-primary:hover,
._md a.md-default-theme:not(.md-button).md-primary:hover {
  color: #007fce !important;
}

/* ---- 4. Form fields: focus underline, labels, placeholders ---- */
md-input-container.md-input-focused:not(.md-input-has-value) md-select .md-select-value,
md-input-container.md-input-focused .md-input,
md-input-container.md-input-focused label,
md-input-container.md-input-focused .md-select-value,
.md-input-focused .md-input {
  color: #0098F0 !important;
  border-color: #0098F0 !important;
}
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
  border-bottom-color: #0098F0 !important;
}

/* ---- 5. Checkboxes / radios / toggles (primary) ---- */
md-checkbox:not([disabled]).md-primary.md-checked .md-icon,
md-checkbox.md-default-theme:not([disabled]).md-primary.md-checked .md-icon {
  background-color: #0098F0 !important;
}
md-radio-button:not([disabled]).md-primary.md-checked .md-on,
md-radio-group:not([disabled]).md-primary.md-checked .md-on {
  background-color: #0098F0 !important;
}
md-switch.md-checked .md-thumb { background-color: #0098F0 !important; }
md-switch.md-checked .md-bar   { background-color: rgba(0,152,240,0.5) !important; }

/* ---- 6. Progress indicators ---- */
md-progress-circular path,
md-progress-circular.md-default-theme path { stroke: #0098F0 !important; }
md-progress-linear .md-bar,
md-progress-linear.md-default-theme .md-bar { background-color: #0098F0 !important; }
md-progress-linear .md-container,
md-progress-linear.md-default-theme .md-container { background-color: #cfeafd !important; }

/* ---- 7. Slider (primary) ---- */
md-slider.md-primary .md-track.md-track-fill,
md-slider.md-primary .md-thumb:after,
md-slider.md-primary .md-sign { background-color: #0098F0 !important; }

/* ---- 8. Tabs ink bar / selected ---- */
md-tabs.md-default-theme .md-tab.md-active,
md-tabs .md-tab.md-active { color: #fff !important; }
md-tabs md-ink-bar { background-color: #f97316 !important; }

/* ---- 9. Selected list rows / active mailbox highlight ---- */
.md-default-theme .md-bg.md-primary,
.md-primary.md-bg,
md-list-item.md-primary.md-selected,
.sg-active { color: #0098F0 !important; }

/* ---- 10. Catch-all: any remaining exact teal RGB the build emitted.
   These map the 6 SOGo teal hues to nearest brand tones so nothing
   stays green even on selectors not enumerated above. ---- */
[style*="rgb(77,128,128)"],
[style*="#4D8080"],
[style*="#4d8080"] {
  /* inline-style fallback; color set generically */
  color: #0098F0 !important;
}

/* ---- 11. Logo sizing (2026-06-10, rev b) ----
   The logo <img> src is rewritten by nginx sub_filter to
   /zvario/zvario-logo-full.svg (492x173 Zvario mark, PNG embedded in
   SVG). The old `content: url()` hack is GONE — it pointed at a
   font-@import SVG that blanks as an image, and the swap belongs in
   the URL rewrite anyway (browsers had the green sogo-full.svg cached
   forever under its immutable ?lm= URL). Only sizing remains here. */
.sg-logo img {
  width: 320px !important;
  max-width: 75% !important;
  height: auto !important;
  max-height: 20vh !important;
}