@import url("../../elastic/styles/styles.min.css");
@import url("recolor.css");

/* ==========================================================================
   Kipa Webmail skin. Layered on top of Elastic.

   Elastic itself is never modified, so upstream security fixes to the stock
   skin keep applying. Everything here is an override in this one file plus
   embed.css.

   Two facts about Elastic drive the approach:
     1. Elastic is LESS-compiled and reads no CSS custom properties. Setting
        --color-main does nothing. Every override needs a real selector.
     2. Dark mode is the class .dark-mode on <html>, not a media query. Any
        light-ground rule must be scoped html:not(.dark-mode) or it paints
        into dark mode.

   Palette and type are the Kipa site design system, so webmail and kipaco.com
   read as one company.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Fonts, self-hosted

   No CDN. Google Fonts is unreliable from Tehran and a third-party font
   request would also leak who is reading mail and when. Files are served from
   this skin over the same TLS connection as the app.

   Fonts download only when actually used to render: a Persian session fetches
   Vazirmatn and never touches Libre Franklin, and the reverse for English.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/vazirmatn-arabic-400-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/vazirmatn-arabic-500-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/vazirmatn-arabic-700-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FEFF;
}
/* Latin inside a Persian session: addresses, subjects, filenames. */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/vazirmatn-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/libre-franklin-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/libre-franklin-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/libre-franklin-latin-600-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/source-serif-4-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/source-serif-4-latin-600-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
}


/* --------------------------------------------------------------------------
   2. Tokens

   Elastic ignores these. They exist so the rules below have one source of
   truth, and so dark mode is a token swap rather than a second stylesheet.
   -------------------------------------------------------------------------- */

:root {
  --k-petrol:  #0D2531;
  --k-navy:    #101824;
  --k-ivory:   #F4F1E9;
  --k-stone:   #EFEBE1;
  --k-ink:     #16202C;
  --k-body:    #3F454E;
  --k-muted:   #6E6A60;
  --k-teal:    #1E5B72;
  --k-gold:    #B4884C;
  --k-gold-dk: #C9A766;
  --k-gold-tx: #8A5E27;

  /* Semantic surface tokens, light mode. */
  --k-bg:        #FFFFFF;
  --k-bg-sunk:   var(--k-ivory);
  --k-bg-raised: #FFFFFF;
  --k-text:      var(--k-ink);
  --k-text-dim:  var(--k-body);
  --k-text-faint:var(--k-muted);
  --k-line:      #DED8CA;
  --k-line-soft: #ECE7DB;
  --k-accent:    var(--k-teal);
  --k-accent-tx: var(--k-teal);
  --k-mark:      var(--k-gold-tx);
  --k-sel:       #E4EDF1;

  /* Vazirmatn second: its faces are limited to Persian by unicode-range, so
     Latin stays in Libre Franklin and Persian typed anywhere (a subject
     field, a folder name) gets a proper face instead of a system fallback. */
  --k-sans:  'Libre Franklin', 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --k-serif: 'Source Serif 4', Georgia, serif;
  --k-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --k-fa:    'Vazirmatn', Tahoma, sans-serif;

  --k-ui: var(--k-sans);
}

/* Dark mode. Grounds are the site's own dark section colours, so the dark
   webmail is recognisably the same brand rather than a generic grey. Link and
   accent colours are lifted because brand teal at #1E5B72 fails contrast on a
   petrol ground. Measured ratios are in the deployment note. */
html.dark-mode {
  --k-bg:        var(--k-petrol);
  --k-bg-sunk:   var(--k-navy);
  --k-bg-raised: #12303E;
  --k-text:      rgba(244, 241, 233, 0.92);
  --k-text-dim:  rgba(244, 241, 233, 0.74);
  --k-text-faint:rgba(244, 241, 233, 0.56);
  --k-line:      rgba(244, 241, 233, 0.16);
  --k-line-soft: rgba(244, 241, 233, 0.09);
  --k-accent:    #7FB8CE;
  --k-accent-tx: #9CCADD;
  --k-mark:      var(--k-gold-dk);
  --k-sel:       rgba(127, 184, 206, 0.16);
}/* Persian swaps the UI family everywhere at once. */
html[dir="rtl"],
/* Persian swaps the UI family everywhere at once. */
html:lang(fa) { --k-ui: var(--k-fa); }


/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

body,
input, select, textarea, button,
.popupmenu, .ui-dialog, .menu li a {
  font-family: var(--k-ui);
}

body { font-size: 14.5px; -webkit-font-smoothing: antialiased; }/* Persian needs more leading and a slightly larger body than Latin. Never
   letter-space Persian: it breaks the joining forms. */
html[dir="rtl"] body,
/* Persian needs more leading and a slightly larger body than Latin. Never
   letter-space Persian: it breaks the joining forms. */
html:lang(fa) body { font-size: 15px; line-height: 1.85; }html[dir="rtl"] *,
html:lang(fa) * { letter-spacing: 0 !important; }

/* Serif is reserved for the two places it helps: the login wordmark and the
   subject of an open message. Dense list UI stays sans for scanning. */
#message-header > .subject,
#messageheader .subject,
#messageheader h1,
.message-part h1 {
  font-family: var(--k-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}
#message-header > .subject { font-size: 1.62rem; line-height: 1.25; }html[dir="rtl"] #message-header > .subject,
html:lang(fa) #message-header > .subject,
html[dir="rtl"] #messageheader .subject,
html:lang(fa) #messageheader .subject,
html[dir="rtl"] #messageheader h1,
html:lang(fa) #messageheader h1 {
  font-family: var(--k-fa);
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   4. Login

   The signature surface, and the only screen where the composition is fully
   ours. Everything is scoped body.task-login so none of it reaches the app.

   Ground is petrol in both modes, so the login logo is always the ivory
   variant. The domain is printed under the rule on purpose: a user who has
   been sent a lookalike login page can see which host they are actually on.
   -------------------------------------------------------------------------- */

/* Elastic's dark rules (.dark-mode body) sit in the same specificity class as
   these, so each ground needs an explicit html.dark-mode twin or dark mode
   repaints the login screen in Elastic's grey.

   #layout > div is NOT cleared here: that selector carries more elements than
   the #layout-content rule below and would outspecify the ground, leaving the
   screen transparent. Only #layout itself needs clearing. */
body.task-login,
html.dark-mode body.task-login {
  background: var(--k-petrol);
}

body.task-login #layout,
html.dark-mode body.task-login #layout {
  background: transparent;
}

body.task-login #layout-content,
html.dark-mode body.task-login #layout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 24px 40px;
  background-color: var(--k-petrol);
  /* Atmosphere: an off-centre teal bloom, a warm gold bloom low and opposite,
     and a fine grain over both so the ground has tooth instead of reading as
     flat fill. */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(30, 91, 114, 0.55) 0%, rgba(13, 37, 49, 0) 60%),
    radial-gradient(80% 60% at 88% 108%, rgba(180, 136, 76, 0.18) 0%, rgba(13, 37, 49, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  overflow-y: auto;
}

/* A single hairline of gold across the very top. Small, but it is the site's
   accent and it frames the screen. */
body.task-login #layout-content::before {
  content: "";
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(180, 136, 76, 0) 0%,
    var(--k-gold) 22%,
    var(--k-gold-dk) 50%,
    var(--k-gold) 78%,
    rgba(180, 136, 76, 0) 100%);
  z-index: 5;
}

body.task-login #logo {
  width: auto;
  max-width: 190px;
  max-height: 96px;
  margin: 0 0 26px;
  animation: k-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.task-login #login-form {
  width: 100%;
  max-width: 372px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* The opening rule and the domain line are one pseudo-element on purpose.
   ::after renders as the form's LAST child, so it lands under the buttons
   rather than beside ::before. Both therefore live on ::before: a 2px top
   border for the rule, the domain as its content.

   The domain is shown so someone who arrived from a link can confirm which
   host they are about to type a password into. */
body.task-login #login-form::before {
  content: "KIPACO.COM";
  display: block;
  direction: ltr;
  text-align: center;
  font-family: var(--k-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: var(--k-gold-dk);
  border-top: 2px solid rgba(244, 241, 233, 0.5);
  padding-top: 13px;
  margin-bottom: 30px;
  animation: k-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

body.task-login #login-form table {
  width: 100%;
  border-collapse: collapse;
  animation: k-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

/* Stack the two rows, but leave td.input alone.

   Elastic hides the text label on login (it stays for screen readers) and
   shows an icon addon instead, so td.input is a Bootstrap .input-group and
   has to remain display:flex. Forcing it to block stacked the icon on top of
   the field. */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr {
  display: block;
  width: 100%;
}
body.task-login #login-form tr { margin-bottom: 22px; }
body.task-login #login-form td { padding: 0; border: 0; }

/* The icon and the field share one underline so the pair reads as a single
   control. The underline lives on the group, not the input. */
body.task-login #login-form td.input {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(244, 241, 233, 0.42);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
body.task-login #login-form td.input:hover {
  border-bottom-color: rgba(244, 241, 233, 0.62);
}
body.task-login #login-form td.input:focus-within {
  border-bottom-color: var(--k-gold-dk);
  box-shadow: 0 1px 0 0 var(--k-gold-dk);
}
body.task-login #login-form .input-group-prepend { display: flex; }
body.task-login #login-form i.input-group-text {
  background: transparent;
  border: 0;
  color: rgba(244, 241, 233, 0.55);
  padding: 0 12px 0 2px;
  font-size: 1.05rem;
  min-width: 0;
}html[dir="rtl"] body.task-login #login-form i.input-group-text,
html:lang(fa) body.task-login #login-form i.input-group-text {
  padding: 0 2px 0 12px;
}
body.task-login #login-form td.input:focus-within i.input-group-text {
  color: var(--k-gold-dk);
}

body.task-login #login-form td.title label {
  display: block;
  font-family: var(--k-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.58);
  margin-bottom: 7px;
}/* Persian labels are words,
not tracked Latin small-caps. */
html[dir="rtl"] body.task-login #login-form td.title label,
not tracked Latin small-caps. */
html:lang(fa) body.task-login #login-form td.title label {
  font-family: var(--k-fa);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
}

/* Underlined fields rather than boxes. Editorial, and it keeps the ground
   visible so the screen stays one surface. */
body.task-login #login-form input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0;
  color: var(--k-ivory);
  font-family: var(--k-ui);
  font-size: 1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.task-login #login-form input.form-control:focus {
  outline: 0;
  background: transparent;
  box-shadow: none;
}
body.task-login #login-form input.form-control::placeholder {
  color: rgba(244, 241, 233, 0.55);
}

/* Chrome paints its own ivory-blue on autofilled inputs, which is opaque and
   would put near-white on the petrol ground. Repaint it. */
body.task-login #login-form input.form-control:-webkit-autofill,
body.task-login #login-form input.form-control:-webkit-autofill:hover,
body.task-login #login-form input.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--k-ivory);
  -webkit-box-shadow: 0 0 0 1000px #102C3A inset;
  caret-color: var(--k-ivory);
}

body.task-login #login-form p.formbuttons {
  margin: 30px 0 0;
  animation: k-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}

body.task-login #rcmloginsubmit {
  display: block;
  width: 100%;
  height: 46px;
  font-family: var(--k-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-petrol);
  background: var(--k-ivory);
  border: 1px solid var(--k-ivory);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
              transform 0.12s ease, box-shadow 0.2s ease;
}html[dir="rtl"] body.task-login #rcmloginsubmit,
html:lang(fa) body.task-login #rcmloginsubmit {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: none;
}
body.task-login #rcmloginsubmit:hover {
  background: var(--k-gold-dk);
  border-color: var(--k-gold-dk);
  color: var(--k-petrol);
  box-shadow: 0 6px 22px rgba(201, 167, 102, 0.26);
}
body.task-login #rcmloginsubmit:active { transform: translateY(1px); }
body.task-login #rcmloginsubmit:focus-visible {
  outline: 2px solid var(--k-gold-dk);
  outline-offset: 3px;
}

body.task-login #login-footer {
  margin-top: 30px;
  font-size: 0.72rem;
  color: rgba(244, 241, 233, 0.56);
  text-align: center;
  animation: k-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
body.task-login #login-footer a { color: rgba(244, 241, 233, 0.62); }

/* Error and status banners have to stay legible on the dark ground. */
body.task-login #messagestack div,
body.task-login .ui.alert {
  font-family: var(--k-ui);
  border-radius: 2px;
  border: 0;
  border-inline-start: 3px solid currentColor;
}

@keyframes k-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.task-login *,
  body.task-login *::before,
  body.task-login *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   5. Application chrome

   Restraint on purpose. This is a tool people work in all day, so the job is
   brand alignment and legibility, not decoration.
   -------------------------------------------------------------------------- */

/* Task bar down the side. Petrol in both modes, which anchors the app to the
   brand and gives the ivory content a frame. */
#layout-menu,
#layout > #taskmenu,
#taskmenu {
  background: var(--k-petrol);
}
#taskmenu a { color: rgba(244, 241, 233, 0.66); }
#taskmenu a:hover { color: var(--k-ivory); background: rgba(244, 241, 233, 0.06); }
#taskmenu a.selected {
  color: var(--k-ivory);
  background: rgba(244, 241, 233, 0.09);
  box-shadow: inset 3px 0 0 0 var(--k-gold-dk);
}html[dir="rtl"] #taskmenu a.selected,
html:lang(fa) #taskmenu a.selected {
  box-shadow: inset -3px 0 0 0 var(--k-gold-dk);
}
#taskmenu a.selected::before { color: var(--k-gold-dk); }

/* Column headers. Scoped so dark mode keeps its own ground. */
html:not(.dark-mode) #layout-sidebar .header,
html:not(.dark-mode) #layout-list .header,
html:not(.dark-mode) #layout-content .header {
  background-color: var(--k-ivory);
  border-bottom: 1px solid var(--k-line);
  color: var(--k-ink);
}
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header {
  background-color: var(--k-bg-sunk);
  border-bottom: 1px solid var(--k-line);
  color: var(--k-text);
}

html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list {
  background-color: #FCFAF6;
}
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list {
  background-color: var(--k-bg);
}
html.dark-mode #layout-content { background-color: var(--k-bg-raised); }

/* Links and primary actions. */
a, a:visited { color: var(--k-accent-tx); }
a:hover { color: var(--k-mark); }

.btn.btn-primary,
button.btn.btn-primary,
.ui-dialog-buttonpane button.mainaction {
  background-color: var(--k-teal);
  border-color: var(--k-teal);
  color: #FFFFFF;
  border-radius: 2px;
}
.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.ui-dialog-buttonpane button.mainaction:hover {
  background-color: var(--k-ink);
  border-color: var(--k-ink);
}
html.dark-mode .btn.btn-primary,
html.dark-mode button.btn.btn-primary {
  background-color: var(--k-accent);
  border-color: var(--k-accent);
  color: var(--k-petrol);
}
html.dark-mode .btn.btn-primary:hover,
html.dark-mode button.btn.btn-primary:hover {
  background-color: var(--k-gold-dk);
  border-color: var(--k-gold-dk);
  color: var(--k-petrol);
}

/* Message list. Unread gets a gold rule on the leading edge, which reads
   faster than bold text alone and is the one place the accent earns its
   keep in daily use. */
#messagelist tbody tr.unread,
.messagelist li.unread {
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--k-mark);
}html[dir="rtl"] #messagelist tbody tr.unread,
html:lang(fa) #messagelist tbody tr.unread,
html[dir="rtl"] .messagelist li.unread,
html:lang(fa) .messagelist li.unread {
  box-shadow: inset -3px 0 0 0 var(--k-mark);
}html[dir="rtl"] #messagelist tbody tr.unread,
html:lang(fa) #messagelist tbody tr.unread { font-weight: 700; }

#messagelist tbody tr.selected,
.messagelist li.selected {
  background-color: var(--k-sel);
}
html:not(.dark-mode) #messagelist tbody tr.selected td { color: var(--k-ink); }

#messagelist tbody tr.flagged td.subject,
.messagelist li.flagged .subject { color: var(--k-mark); }

/* Folder list selection matches the message list rather than Elastic blue. */
#mailboxlist li.selected > a,
.listing li.selected > a {
  background-color: var(--k-sel);
  color: var(--k-accent-tx);
  box-shadow: inset 3px 0 0 0 var(--k-accent);
}html[dir="rtl"] #mailboxlist li.selected > a,
html:lang(fa) #mailboxlist li.selected > a,
html[dir="rtl"] .listing li.selected > a,
html:lang(fa) .listing li.selected > a {
  box-shadow: inset -3px 0 0 0 var(--k-accent);
}

/* Focus visibility, matched to the site. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--k-accent);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Form controls in dark mode. Elastic leaves several near-white. */
html.dark-mode input.form-control,
html.dark-mode select.form-control,
html.dark-mode textarea.form-control {
  background-color: rgba(244, 241, 233, 0.05);
  border-color: var(--k-line);
  color: var(--k-text);
}
html.dark-mode input.form-control:focus,
html.dark-mode select.form-control:focus,
html.dark-mode textarea.form-control:focus {
  border-color: var(--k-accent);
  background-color: rgba(244, 241, 233, 0.08);
}

/* Quota, counters and other small metadata read as data, not prose. */
.quota-widget .count,
#quotadisplay,
.messagelist .size {
  font-family: var(--k-mono);
  font-size: 0.78em;
}html[dir="rtl"] .quota-widget .count,
html:lang(fa) .quota-widget .count,
html[dir="rtl"] #quotadisplay,
html:lang(fa) #quotadisplay,
html[dir="rtl"] .messagelist .size,
html:lang(fa) .messagelist .size {
  font-family: var(--k-fa);
}/* --------------------------------------------------------------------------
   6. RTL corrections

   Elastic's RTL support is good. These are the places where a Latin-tuned
   detail survives into Persian and looks wrong.
   -------------------------------------------------------------------------- */

html[dir="rtl"] .boxtitle,
/* --------------------------------------------------------------------------
   6. RTL corrections

   Elastic's RTL support is good. These are the places where a Latin-tuned
   detail survives into Persian and looks wrong.
   -------------------------------------------------------------------------- */

html:lang(fa) .boxtitle,
html[dir="rtl"] .header .header-title,
html:lang(fa) .header .header-title,
html[dir="rtl"] .listing li a,
html:lang(fa) .listing li a,
html[dir="rtl"] .propform label,
html:lang(fa) .propform label {
  text-transform: none;
}/* Persian digits have no glyph in the IBM Plex Mono latin subset and would
   fall back mid-string. Anything that can hold a localized numeral uses
   Vazirmatn instead. */
html[dir="rtl"] .messagelist .date,
/* Persian digits have no glyph in the IBM Plex Mono latin subset and would
   fall back mid-string. Anything that can hold a localized numeral uses
   Vazirmatn instead. */
html:lang(fa) .messagelist .date,
html[dir="rtl"] #messageheader .date,
html:lang(fa) #messageheader .date,
html[dir="rtl"] .pagenav .countdisplay,
html:lang(fa) .pagenav .countdisplay {
  font-family: var(--k-fa);
  font-feature-settings: "ss01";
}/* Latin strings inside Persian UI keep their own direction so addresses and
   filenames do not reorder. */
html[dir="rtl"] .rcmContactAddress,
/* Latin strings inside Persian UI keep their own direction so addresses and
   filenames do not reorder. */
html:lang(fa) .rcmContactAddress,
html[dir="rtl"] .adr,
html:lang(fa) .adr,
html[dir="rtl"] a[href^="mailto:"],
html:lang(fa) a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}


/* --------------------------------------------------------------------------
   7. Small screens

   meta.json drops Elastic's maximum-scale=1.0 so the interface can be pinch
   zoomed. That matters for dense Persian text on a phone, and suppressing
   zoom is a WCAG 1.4.4 failure.

   The reason Elastic set it is that iOS Safari zooms the viewport when a
   focused input renders below 16px. The correct guard is to keep inputs at
   16px, not to forbid the user from zooming.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  input.form-control,
  select.form-control,
  textarea.form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"] {
    /* Elastic sets 14px via .input-group-lg > .form-control, which outranks
       this selector. The override is deliberate: below 16px iOS Safari zooms
       the viewport on focus, which is the behaviour maximum-scale=1.0 was
       there to suppress. Measured at 14px before this rule. */
    font-size: 16px !important;
  }

  body.task-login #layout-content { padding: 28px 20px 32px; }
  body.task-login #logo { max-width: 150px; max-height: 76px; margin-bottom: 22px; }
  body.task-login #login-form { max-width: 100%; }
}


/* --------------------------------------------------------------------------
   8. Persian direction

   Roundcube 1.7.3 emits <html lang="fa"> and never sets dir="rtl", and Elastic
   ships no RTL rules at all: zero logical properties against 70 hardcoded
   left: declarations. So a Persian session renders Persian text inside an
   LTR layout.

   Flipping direction globally would correct the text and mirror the flex
   columns, but it would leave every one of those physical rules pointing the
   wrong way, and the logged-in interface cannot be verified from here. So the
   flip is applied only to the login screen, whose composition is entirely
   ours and has been checked on screen. The typography rules above are safe
   everywhere and already apply through :lang(fa).

   Making the whole application RTL is real work and is written up in the
   deployment note rather than half-done here.
   -------------------------------------------------------------------------- */

html:lang(fa) body.task-login #layout-content,
html:lang(fa) body.task-login #login-form {
  direction: rtl;
}

/* Placeholders carry the field name on this screen, since Elastic hides the
   text label, so they have to sit on the correct side. */
html:lang(fa) body.task-login #login-form input.form-control {
  text-align: right;
}

/* The domain stays Latin and left-to-right inside the flipped form. */
html:lang(fa) body.task-login #login-form::before {
  direction: ltr;
  text-align: center;
}


/* --------------------------------------------------------------------------
   9. Polish pass, October 2026

   recolor.css (generated by tools/kipa-recolor.py) has already replaced
   Elastic's accent blue with Kipa teal in every rule that used it. What
   follows are the places where a straight swap is not the right answer.
   -------------------------------------------------------------------------- */

/* Compose sits on the petrol task bar, where brand teal measures 2.1:1. It is
   the primary action of the whole application, so it takes the gold. */
#taskmenu .action-buttons a,
#taskmenu .action-buttons a.compose { color: var(--k-gold-dk); }
#taskmenu .action-buttons a:hover {
  color: var(--k-ivory);
  background: rgba(244, 241, 233, 0.06);
}

/* Sign out is an ordinary control until the pointer is on it. Elastic marks
   its red !important, so this has to as well. */
#taskmenu a.logout { color: rgba(244, 241, 233, 0.66) !important; }
#taskmenu a.logout:hover { color: #F2B8A8 !important; background: rgba(244, 241, 233, 0.06); }

/* The About dialog lists the Roundcube version and every plugin. Staff do not
   need it and a stranger should not have it. */
#taskmenu a.about { display: none; }

/* Counts are data: same face and square corner as sizes and quotas. */
.unreadcount,
.listing li .unreadcount,
.folderlist li.mailbox .unreadcount {
  font-family: var(--k-mono);
  font-size: 0.76em;
  border-radius: 2px;
  letter-spacing: 0;
}
html:lang(fa) .unreadcount { font-family: var(--k-fa); }

/* The round compose button on a phone floats over the ivory list. */
.floating-action-buttons a.button {
  box-shadow: 0 6px 18px rgba(13, 37, 49, 0.28);
}
html.dark-mode .floating-action-buttons a.button {
  background: var(--k-gold-dk);
  color: var(--k-petrol);
}

/* Buttons share the site's near-square corner. */
.btn,
.ui-dialog-buttonpane button { border-radius: 2px; }

/* One line of help under the sign-in button (added by the kipa_branding plugin). */
body.task-login .kipa-login-help {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  color: rgba(244, 241, 233, 0.56);
}
html:lang(fa) body.task-login .kipa-login-help { font-size: 13px; line-height: 1.9; }

/* Sign-in block: Elastic offsets the logo by 16vh and the form by 20vh, which
   dropped the whole composition to the bottom of the screen. It is centred by
   the flex ground instead, with a little more air below than above so it sits
   at the optical centre. */
body.task-login #logo,
body.task-login #login-form { top: 0; }
body.task-login #layout-content,
html.dark-mode body.task-login #layout-content { padding-bottom: 9vh; }

/* Sender picture: when there is none, the placeholder sits on stone, not grey. */
#message-header > .header img.contactphoto { background: var(--k-stone); }
html.dark-mode #contactpic,
html.dark-mode img.contactphoto { background-color: rgba(244, 241, 233, 0.10) !important; }

/* In dark mode a formatted message keeps its own light page, because its
   colours belong to the sender. Give that page margins so it reads as a sheet
   of paper laid on the dark desk rather than a white block. */
html.dark-mode #messagebody .message-htmlpart {
  padding: 18px 22px;
  border-radius: 2px;
}

/* Dark mode keeps the brand frame: navy task bar around petrol content, and
   the gold compose action. Elastic's dark rules outrank the plain selectors
   above, so both need an html.dark-mode twin. */
html.dark-mode #layout-menu,
html.dark-mode #taskmenu { background: var(--k-navy); }
html.dark-mode #taskmenu .action-buttons a,
html.dark-mode #taskmenu .action-buttons a.compose { color: var(--k-gold-dk); }
html.dark-mode #taskmenu .action-buttons a:hover { color: var(--k-ivory); }


/* --------------------------------------------------------------------------
   10. Persian and English in the same mailbox

   Kipa mail is Persian and English side by side. With plain CSS direction a
   Persian subject in an English list is cut off at its beginning, and its
   punctuation lands on the wrong side. `unicode-bidi: plaintext` lets every
   line take its direction from its own first strong letter, so each subject,
   name and paragraph starts where it should and is truncated at its end.
   Checked in the browser: the first characters stay visible for both scripts.

   Lists keep the interface's own alignment so the column edge holds. The open
   message follows its content, because that is where reading happens.
   -------------------------------------------------------------------------- */

.treelist li a,
.contactlist td.name,
.contactlist li a,
.header .header-title,
.attachmentslist li a.filename,
input#compose-subject,
#mailsearchform input,
.searchbar input {
  unicode-bidi: plaintext;
}

#message-header > .subject,
#messagebody .message-part pre,
#messagebody .message-part div.pre,
#messagebody .message-htmlpart,
textarea#composebody {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Persian reads better with more leading, in any interface language. The
   Vazirmatn face is used for Persian glyphs only (see unicode-range above),
   so Latin text in the same line is unaffected. */
/* Plain-text mail in the reading face, not a typewriter face. It is ordinary
   correspondence here, and Persian has no monospace anyway. */
#messagebody .message-part pre,
#messagebody .message-part div.pre {
  font-family: var(--k-ui), 'Vazirmatn', Tahoma, sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
}
body { font-family: var(--k-ui), 'Vazirmatn', Tahoma, sans-serif; }

/* Footer bars (paging, and Previous / Reply / Next on a phone) share the
   ivory of the header bars instead of Elastic's cool grey. */
html:not(.dark-mode) #layout-list > .footer,
html:not(.dark-mode) #layout-content > .footer,
html:not(.dark-mode) #layout-sidebar > .footer,
html:not(.dark-mode) .menu.toolbar.popup-footer {
  background-color: var(--k-ivory);
  border-top: 1px solid var(--k-line);
}

/* Message list lines carry dir="auto" (set by kipa_mail.js). They stay on the
   list's left edge when they fit, and keep their beginning when they do not. */
.messagelist td.subject span.subject[dir],
.messagelist td.subject span.fromto[dir] { text-align: left; }