/* Our look for Openprovider's webmail (SOGo), served in place of SOGo's
   styles.css by the relay at webmail.dragon.business (deploy/Caddyfile).

   SOGo's own stylesheet comes first, unchanged: the relay fetches it under
   another name in the same folder, so the relative font and image paths
   inside it still resolve. Colours are set by theme.js, not here; this file
   holds the fonts, the sign-in page, and the few colours SOGo writes in by
   hand, which theme.js cannot reach. */
@import url("sogo-styles.css");

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/__dragon/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/__dragon/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/__dragon/fonts/gloock-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The website's colours (web/app/globals.css, .dragon). */
:root {
  --dw-bg: #f6f8f7;
  --dw-surface: #ffffff;
  --dw-raised: #eef3f1;
  --dw-ink: #13231e;
  --dw-muted: #56665f;
  --dw-line: #dfe6e2;
  --dw-accent: #1e5b4a;
  --dw-accent-ink: #ffffff;
  --dw-accent-soft: #e4efea;
  /* The sign-in form's half of the card. */
  --dw-panel: #1e5b4a;
  --dw-panel-ink: #ffffff;
  --dw-panel-muted: rgba(255, 255, 255, .72);
  --dw-panel-line: rgba(255, 255, 255, .34);
  --dw-panel-focus: #ffffff;
  --dw-panel-error: #ffc4b9;
  --dw-fab: #ffffff;
  --dw-fab-ink: #1e5b4a;
}
html.dragon-dark {
  --dw-bg: #0d241f;
  --dw-surface: #123029;
  --dw-raised: #173a31;
  --dw-ink: #f0e7d4;
  --dw-muted: #a3b8ae;
  --dw-line: #24493f;
  --dw-accent: #e9a93b;
  --dw-accent-ink: #10231e;
  --dw-accent-soft: #2c3f2b;
  --dw-panel: #173a31;
  --dw-panel-ink: #f0e7d4;
  --dw-panel-muted: rgba(240, 231, 212, .7);
  --dw-panel-line: rgba(240, 231, 212, .26);
  --dw-panel-focus: #e9a93b;
  --dw-panel-error: #f3b3ad;
  --dw-fab: #e9a93b;
  --dw-fab-ink: #10231e;
  color-scheme: dark;
}

/* SOGo sets Fira Sans on exactly these. */
html, button, input, select, textarea, .md-chips {
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* ---- The sign-in page -----------------------------------------------------
   One card on the page background: our logo on one half, the form on a green
   half (raised dragon green in dark). Rules start at #loginContent so they
   outrank the theme's, which are many classes deep. */

/* Important: SOGo paints this from its palette in a style it adds after this
   file, with more classes than this element can be matched by. */
[ui-view=login] {
  background-color: var(--dw-bg) !important;
}
[ui-view=login] md-content {
  padding: 24px 16px;
}
@media (min-width: 1024px) {
  /* SOGo clips here, which would cut the card's shadow off in a hard line. */
  [ui-view=login] md-content {
    overflow: visible;
  }
}
@media (max-width: 1023px) {
  /* As tall as its content, in the middle, not stretched to the bottom. */
  [ui-view=login] md-content #loginContent {
    flex: 0 0 auto;
  }
}
[ui-view=login] md-content #loginContent {
  width: 100%;
  max-width: 880px;
  margin: auto;
  overflow: hidden;
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  background-color: var(--dw-surface);
  box-shadow: 0 1px 2px rgba(19, 35, 30, .05), 0 16px 40px rgba(19, 35, 30, .08);
}

#loginContent .sg-logo {
  align-self: center;
  margin: 48px auto 44px;
  text-align: center;
}
/* SOGo pushes the logo to the right edge on wide screens. */
#loginContent .sg-logo .md-flex {
  display: none;
}
#loginContent .sg-logo > div {
  justify-content: center;
  padding-bottom: 0;
}
/* SOGo slides its logo in from the side; ours fades in with its caption. */
#loginContent .sg-logo img {
  width: 280px;
  max-width: 80%;
  height: auto;
  margin: 0 auto;
  transform: none;
}
#loginContent .sg-logo::after {
  content: "Webmail";
  display: block;
  margin-top: 6px;
  font-family: "Gloock", Georgia, serif;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--dw-ink);
  transition: opacity .4s linear;
}
[ui-view=login] md-content.ng-hide .sg-logo::after {
  opacity: 0;
}

#loginContent .sg-login,
#loginContent sg-ripple {
  background-color: var(--dw-panel);
  color: var(--dw-panel-ink);
}
#loginContent .sg-login-content {
  margin: 0 auto;
  padding: 24px 16px 20px;
}
#loginContent .sg-login md-icon,
#loginContent .sg-login md-input-container label,
#loginContent .sg-login md-input-container label::after,
#loginContent .sg-login md-select .md-select-value.md-select-placeholder,
#loginContent .sg-login md-select .md-select-icon {
  color: var(--dw-panel-muted);
}
#loginContent .sg-login .md-input,
#loginContent .sg-login md-select .md-select-value,
#loginContent .sg-login md-switch,
#loginContent .sg-login a {
  color: var(--dw-panel-ink);
  border-color: var(--dw-panel-line);
}
#loginContent .sg-login md-input-container.md-input-focused label,
#loginContent .sg-login md-input-container.md-input-focused md-icon {
  color: var(--dw-panel-focus);
}
#loginContent .sg-login md-input-container.md-input-focused .md-input,
#loginContent .sg-login md-select:focus .md-select-value {
  border-color: var(--dw-panel-focus);
}
#loginContent .sg-login md-input-container.md-input-invalid label,
#loginContent .sg-login md-input-container.md-input-invalid .md-input,
#loginContent .sg-login md-input-container.md-input-invalid div[ng-message] {
  color: var(--dw-panel-error);
  border-color: var(--dw-panel-error);
}
#loginContent .sg-login md-switch .md-bar {
  background-color: var(--dw-panel-line);
}
#loginContent .sg-login md-switch .md-thumb {
  background-color: var(--dw-panel-ink);
}
#loginContent .sg-login md-switch.md-checked .md-bar {
  background-color: color-mix(in srgb, var(--dw-fab) 50%, transparent);
}
#loginContent .sg-login md-switch.md-checked .md-thumb {
  background-color: var(--dw-fab);
}
#loginContent .sg-login .md-button.md-fab,
#loginContent .sg-login .md-button.md-fab:not([disabled]):hover {
  background-color: var(--dw-fab);
}
#loginContent .sg-login .md-button.md-fab:not([disabled]) md-icon {
  color: var(--dw-fab-ink);
}
#loginContent .sg-login .md-button.md-fab[disabled] {
  background-color: color-mix(in srgb, var(--dw-panel-ink) 14%, transparent);
}
#loginContent .sg-login .md-button.md-fab[disabled] md-icon {
  color: var(--dw-panel-muted);
}
/* "Authenticating", "Welcome" and errors, over the whole card. */
#loginContent sg-ripple-content .md-fg,
#loginContent sg-ripple-content md-icon {
  color: var(--dw-panel-ink);
}

/* Dark: a faint dragon-scale texture behind the card, as on the website. */
html.dragon-dark [ui-view=login] {
  position: relative;
}
html.dragon-dark [ui-view=login]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0a20 20 0 0 0 40 0M-20 20a20 20 0 0 0 40 0M20 20a20 20 0 0 0 40 0' fill='none' stroke='%23e9a93b' stroke-opacity='.13'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 85%);
}
html.dragon-dark [ui-view=login] md-content {
  position: relative;
  z-index: 1;
}

/* ---- Colours SOGo writes in by hand ----------------------------------------
   theme.js cannot reach these. Selectors are SOGo's own, so coming later is
   enough to win. First SOGo's khaki and teal, in both faces. */
.sg-subcontent {
  border-left-color: var(--dw-line);
}
.sg-timepicker-input-container,
.hours-pane {
  border-bottom-color: var(--dw-line);
}
.sg-timepicker-input-container.sg-timepicker-focused {
  border-bottom-color: var(--dw-accent);
}
[ui-view=calendars] .allDaysView,
[ui-view=calendars] .allDaysView--sidenav,
[ui-view=calendars] .hours .hour,
[ui-view=calendars] .days .day .clickableHourCell,
[ui-view=calendars] .minutes30,
[ui-view=calendars] .monthView .dayLabels,
[ui-view=calendars] .monthView md-grid-tile {
  border-bottom-color: var(--dw-line);
}
[ui-view=calendars] .days .day,
[ui-view=calendars] .monthView md-grid-tile,
.attendees .hour {
  border-left-color: var(--dw-line);
  border-right-color: var(--dw-line);
}
.attendees .sg-no-freebusy {
  background-color: var(--dw-raised);
  background-image: repeating-linear-gradient(-45deg, var(--dw-surface), var(--dw-surface) 2px, transparent 2px, transparent 4px);
}

/* ---- Inside: the website's look ------------------------------------------
   Flat surfaces with hairlines instead of coloured bars and shadows, rounded
   cards, the selection as a soft pill, Gloock for names and subjects. Rules
   start at html.dragon (set by theme.js) to outrank the theme's. */

/* Bars: the surface with a line under it, like the website's header. */
html.dragon md-toolbar:not(.md-menu-toolbar):not(.md-warn) {
  background-color: var(--dw-surface);
  color: var(--dw-ink);
  border-bottom: 1px solid var(--dw-line);
}
html.dragon md-toolbar:not(.md-menu-toolbar):not(.md-warn) md-icon {
  color: var(--dw-muted);
  fill: var(--dw-muted);
}
html.dragon md-toolbar:not(.md-menu-toolbar):not(.md-warn) .md-button[disabled] md-icon {
  color: color-mix(in srgb, var(--dw-muted) 40%, transparent);
}
html.dragon md-toolbar:not(.md-menu-toolbar):not(.md-warn) md-input-container[md-no-float] .md-input {
  background-color: transparent;
  color: var(--dw-ink);
  border-color: var(--dw-line);
}
html.dragon md-toolbar:not(.md-menu-toolbar):not(.md-warn) md-input-container[md-no-float].md-input-focused .md-input {
  border-color: var(--dw-accent);
}
html.dragon md-toolbar:not(.md-menu-toolbar):not(.md-warn) .md-input::placeholder {
  color: var(--dw-muted);
}
/* The sender's address at the top of a new message. */
html.dragon md-toolbar md-autocomplete.md-bg {
  background-color: var(--dw-raised) !important;
  border-radius: 10px;
}
html.dragon md-toolbar md-autocomplete.md-bg input {
  color: var(--dw-ink);
}
/* The bar that takes over while messages are selected. */
html.dragon md-toolbar.sg-toolbar-secondary:not(.md-menu-toolbar) {
  background-color: var(--dw-accent-soft);
}

/* Side panel and list on the surface, the reading pane on the page. The
   important ones beat colours SOGo sets on the element itself. */
html.dragon md-sidenav {
  box-shadow: none;
  border-right: 1px solid var(--dw-line);
  background-color: var(--dw-surface);
}
html.dragon md-sidenav md-content,
html.dragon .view-list md-content {
  background-color: var(--dw-surface) !important;
}
html.dragon .view-list {
  border-right: 1px solid var(--dw-line);
}
html.dragon .view-list .md-subheader {
  background-color: transparent;
  color: var(--dw-muted);
}
html.dragon .view-detail {
  background-color: var(--dw-bg) !important;
}
html.dragon .view-detail md-card {
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  box-shadow: none;
  background-color: var(--dw-surface);
}

/* Rows: inset, rounded, and the selected one a soft pill. */
html.dragon md-list-item.sg-message-list-item,
html.dragon md-list-item.sg-mailbox-list-item {
  margin: 0 8px;
  border-radius: 10px;
  overflow: hidden;
}
html.dragon md-list-item.sg-mailbox-list-item.sg-selected.md-bg {
  background-color: var(--dw-accent-soft);
}
/* SOGo would put the accent's white text on it, with an important of its
   own. */
html.dragon md-list-item.md-bg.md-accent.md-hue-2 {
  color: var(--dw-ink) !important;
}
html.dragon md-list-item.sg-mailbox-list-item.sg-selected,
html.dragon md-list-item.sg-mailbox-list-item.sg-selected md-icon {
  color: var(--dw-accent);
}

/* Gloock where the website uses it: names, subjects, the big date. */
html.dragon .sg-md-headline,
html.dragon md-sidenav md-toolbar .sg-md-title,
html.dragon .sg-date-today {
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
html.dragon .view-detail .sg-md-headline {
  font-size: 26px;
  line-height: 1.2;
}

/* Buttons like the website's: rounded rectangles, the write button too. */
html.dragon .md-button:not(.md-fab):not(.md-icon-button):not(.md-no-style) {
  border-radius: 10px;
}
html.dragon .md-button.md-fab {
  border-radius: 16px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45);
}
html.dragon .md-button.md-fab.md-mini {
  border-radius: 12px;
}
html.dragon .md-button.md-fab .md-ripple-container {
  border-radius: inherit;
}

/* Dialogs and menus: rounded, edged with the hairline. */
html.dragon md-dialog {
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45);
}
html.dragon md-menu-content,
html.dragon md-select-menu {
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .35);
}

html.dragon * {
  scrollbar-width: thin;
  scrollbar-color: var(--dw-line) transparent;
}

/* The light / dark switch theme.js adds: in the top bar, or in the corner of
   the sign-in page. */
.dragon-theme {
  display: inline-flex;
  flex: none;
  gap: 2px;
  margin: 0 8px;
  padding: 3px;
  border: 1px solid var(--dw-line);
  border-radius: 10px;
  background-color: var(--dw-surface);
}
.dragon-theme--corner {
  position: fixed;
  z-index: 70;
  top: 16px;
  right: 16px;
  margin: 0;
}
.dragon-theme button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--dw-muted);
  cursor: pointer;
}
.dragon-theme button:hover {
  color: var(--dw-ink);
}
.dragon-theme button:focus-visible {
  outline: 2px solid var(--dw-accent);
  outline-offset: 1px;
}
.dragon-theme button[aria-checked="true"] {
  background-color: var(--dw-accent-soft);
  color: var(--dw-accent);
}
.dragon-theme svg {
  width: 17px;
  height: 17px;
}

/* Links in our colours, except inside an email, which keeps its own. */
html.dragon a:not(.md-button) {
  color: var(--dw-accent);
}
html.dragon-dark a:not(.md-button) {
  color: #efc672;
}
html.dragon .mailer_htmlcontent a:not(.md-button) {
  color: revert;
}
/* theme.js runs the dark background palette from dark to light for SOGo's
   sake; these are the places where Angular Material itself names a shade and
   expects the opposite. */
html.dragon-dark md-backdrop.md-opaque,
html.dragon-dark ._md-panel-backdrop {
  background-color: #030d0b;
}
html.dragon-dark .md-button.md-raised:not(.md-primary):not(.md-accent):not(.md-warn) {
  background-color: var(--dw-raised);
  color: var(--dw-ink);
}
html.dragon-dark md-chips md-chip:not(.md-focused) {
  background-color: var(--dw-raised);
}
html.dragon-dark md-switch:not(.md-checked) .md-thumb {
  background-color: #c9d6cf;
}
html.dragon-dark md-toast .md-toast-content {
  background-color: var(--dw-raised);
  color: var(--dw-ink);
}
html.dragon-dark md-toast .md-toast-content .md-button:not(.md-highlight) {
  color: var(--dw-ink);
}

/* Accent hue-2 is the selected row, so a soft tint in both faces; as text
   (today's date in the calendar) it is the accent itself instead. */
html.dragon .md-fg.md-accent.md-hue-2 {
  color: var(--dw-accent);
}

/* Senders without a picture: SOGo's grey figure, which vanished on dark. */
html.dragon-dark .md-avatar md-icon,
html.dragon-dark .md-avatar::before,
html.dragon-dark sg-avatar-image .material-icons,
html.dragon-dark sg-avatar-image md-icon {
  color: rgba(240, 231, 212, .32);
}

/* Then the whites and greys, which only the dark face has to change. */
html.dragon-dark md-dialog {
  background-color: var(--dw-surface) !important;
}
html.dragon-dark .sg-form-section,
html.dragon-dark .view-detail md-card,
html.dragon-dark .sg-progress-circular-floating,
html.dragon-dark .sg-over-dropzone .sg-dropzone,
html.dragon-dark [ui-view=calendars] md-toolbar.daysView,
html.dragon-dark [ui-view=calendars] md-toolbar.monthView,
html.dragon-dark [ui-view=calendars] md-content[sg-calendar-scroll-view] {
  background-color: var(--dw-surface);
}
html.dragon-dark .sg-droppable-over {
  background-color: var(--dw-surface) !important;
}
html.dragon-dark .md-scroll-mask > .md-scroll-mask-bar,
html.dragon-dark .sg-has-form-sections,
html.dragon-dark [ui-view=calendars] .days .day .clickableHourCell.outOfDay,
html.dragon-dark [ui-view=calendars] .monthView md-grid-tile.dayOfAnotherMonth {
  background-color: var(--dw-bg);
}
html.dragon-dark .sg-time-selection-indicator:hover,
html.dragon-dark .sg-time-selection-indicator.md-focus,
html.dragon-dark [ui-view=calendars] .sg-priority {
  background: var(--dw-raised);
}
html.dragon-dark .sg-skeleton .md-button.sg-icon-button,
html.dragon-dark .sg-skeleton .md-icon-button,
html.dragon-dark .sg-skeleton .sg-md-body,
html.dragon-dark .sg-skeleton .sg-md-subhead {
  color: var(--dw-raised);
  background-color: var(--dw-raised);
}
html.dragon-dark .sg-timepicker-input,
html.dragon-dark .sg-over-dropzone .sg-dropzone md-icon,
html.dragon-dark [ui-view=calendars] .sg-event .ghostEndHour,
html.dragon-dark [ui-view=calendars] .sg-event .ghostStartHour,
html.dragon-dark [ui-view=calendars] .multicolumnDay {
  color: var(--dw-ink);
}
html.dragon-dark .sg-over-dropzone .sg-dropzone {
  border-color: var(--dw-ink);
}
html.dragon-dark .button-label,
html.dragon-dark .pseudo-input-label,
html.dragon-dark md-toolbar.md-accent.md-hue-1 md-icon,
html.dragon-dark .md-toolbar-tools.md-accent.md-hue-1 md-icon,
html.dragon-dark md-sidenav md-checkbox.sg-folder .md-container::after,
html.dragon-dark .sg-attachment-size,
html.dragon-dark .msg-attachment-image md-card-content p .sg-label-outline,
html.dragon-dark .msg-attachment-link md-card-content p .sg-label-outline,
html.dragon-dark [sg-toggle-grid] md-grid-tile.sg-icon-button,
html.dragon-dark [ui-view=calendars] .sg-priority {
  color: var(--dw-muted);
}
html.dragon-dark [sg-toggle-grid] md-grid-tile.sg-icon-button {
  border-color: var(--dw-line);
}
html.dragon-dark .sg-timepicker-triangle-button .sg-timepicker-expand-triangle {
  border-top-color: var(--dw-muted);
}
html.dragon-dark .md-sidenav-left md-list-item[disabled],
html.dragon-dark md-sidenav md-list-item[disabled] {
  color: rgba(240, 231, 212, .4) !important;
}
html.dragon-dark .md-sidenav-left md-list-item[disabled] md-icon,
html.dragon-dark md-sidenav md-list-item[disabled] md-icon {
  color: rgba(240, 231, 212, .4);
}
html.dragon-dark [ui-view=calendars] .monthView md-grid-tile.dayOfAnotherMonth .sg-calendar-tile-header {
  color: rgba(240, 231, 212, .35) !important;
}

/* An HTML email brings its own colours, mostly dark text on nothing, so in
   the dark face it keeps a white page of its own. */
html.dragon-dark .mailer_htmlcontent {
  color-scheme: light;
  padding: 16px;
  border-radius: 10px;
  background-color: #ffffff;
  color: #13231e;
}