/**
 * Hangarville skin — design tokens + overrides layered on Elastic (Roundcube 1.7.5)
 * Loaded AFTER elastic styles.css and bootstrap via includes/layout.html override.
 *
 * Tokens mirror www.hangarville.com (next-themes :root layer):
 *   primary #0b63e5 | navy #0e1f33 | paper #fafaf8 | card #fff | muted #f0efeb
 *   border #e5e4df | fg #16181d | fg-muted #565d66 | radius 14px | Inter/Sora/Plex Mono
 */

/* ---------- tokens ---------- */
:root {
  --hg-primary:   #0b63e5;
  --hg-primary-h: #0a54c4;
  --hg-navy:      #0e1f33;
  --hg-paper:     #fafaf8;
  --hg-card:      #ffffff;
  --hg-mutedbg:   #f0efeb;
  --hg-border:    #e5e4df;
  --hg-fg:        #16181d;
  --hg-fg-muted:  #565d66;
  --hg-ok:        #178a4c;
  --hg-warn:      #f7b928;
  --hg-danger:    #c2410c;
  --hg-link:      #0b63e5;
  --hg-radius:    14px;
  --hg-radius-sm: 10px;
  --hg-shadow:    0 1px 2px rgba(20,20,30,.04), 0 8px 26px rgba(20,20,30,.06);
  --hg-font-body: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
  --hg-font-head: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --hg-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ---------- typography ---------- */
.popover,
body,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--hg-font-body);
}

h1, h2, h3, h4, h5, h6,
#layout > div > .header,
.header,
.popover-header {
  font-family: var(--hg-font-head) !important;
}

/* data/spec-ish text (mail counts, quota, dates) get the mono voice */
.quota-widget,
.listing-info,
.messagelist td.subject span.date,
#message-header .header-headers .header-title {
  font-family: var(--hg-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- links ---------- */
a { color: var(--hg-link); }
a:hover { color: var(--hg-primary-h); }

/* ---------- page + layout chrome ---------- */
html { font-size: 14px; }
body {
  color: var(--hg-fg);
  background-color: var(--hg-paper);
}

#layout > div > .header {
  color: var(--hg-fg);
  background-color: var(--hg-paper);
  border-bottom: 1px solid var(--hg-border);
  box-shadow: 0 1px 2px rgba(20,20,30,.04);
}
#layout > div > .header a.button { color: var(--hg-fg-muted); }
#layout > div > .header a.button:hover,
#layout > div > .header a.button:focus { color: var(--hg-fg); background-color: var(--hg-mutedbg); }
#layout > div > .footer {
  border-top: 1px solid var(--hg-border);
  background-color: var(--hg-paper);
}

#layout-list,
#layout-sidebar {
  border-color: var(--hg-border);
  background-color: var(--hg-card);
}
#layout-content { background-color: var(--hg-card); }

/* ---------- left task menu (navy rail, site-navy) ---------- */
#layout-menu,
#layout-menu .popover-header,
#taskmenu .special-buttons,
#rcmdraglayer {
  background-color: var(--hg-navy) !important;
}
#layout-menu .popover-header { border: 0 !important; }
#taskmenu a { color: rgba(255,255,255,.72) !important; }
#taskmenu a.selected,
#taskmenu a:hover,
#taskmenu a:focus {
  color: #fff !important;
  background-color: rgba(255,255,255,.09) !important;
}
#taskmenu .action-buttons a,
html.dark-mode #taskmenu .action-buttons a {
  color: var(--hg-primary) !important;
}
#taskmenu .action-buttons a:hover {
  color: #fff !important;
  background-color: rgba(255,255,255,.09) !important;
}
#taskmenu a.logout,
#taskmenu a.logout:hover { color: var(--hg-danger) !important; }
/* logo inside dark popover-header: nothing to invert (our SVG is light-on-dark ready) */

/* ---------- search bar ---------- */
.searchbar {
  background-color: var(--hg-card);
  border-bottom: 1px solid var(--hg-border);
}

/* ---------- listings ---------- */
.listing tbody td,
.listing li a { border-color: var(--hg-border); }
.listing tr.selected td,
.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a {
  color: var(--hg-fg);
  background-color: rgba(11, 99, 229, 0.08);
}
.listing tr:focus,
.listing tr.focused {
  outline-color: var(--hg-primary);
}
.unreadcount,
.badge {
  background-color: var(--hg-primary);
  color: #fff;
}
.messagelist tr.unread td.subject span.subject { color: var(--hg-fg); }

/* ---------- buttons ---------- */
a.button,
button.btn { border-radius: var(--hg-radius-sm); }
.btn-primary,
#layout > div > .header a.btn-primary,
button.btn-primary,
#rcmloginsubmit,
.button.mainaction {
  background-color: var(--hg-primary);
  border-color: var(--hg-primary);
  color: #fff !important;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled):not(.disabled),
.btn-primary:focus:not(:disabled):not(.disabled),
.button.mainaction:hover,
#rcmloginsubmit:hover {
  background-color: var(--hg-primary-h);
  border-color: var(--hg-primary-h);
  color: #fff !important;
}
.btn-secondary {
  color: var(--hg-fg);
  background-color: var(--hg-card);
  border-color: var(--hg-border);
}
.btn-secondary:hover:not(:disabled):not(.disabled) {
  background-color: var(--hg-mutedbg);
  border-color: var(--hg-border);
  color: var(--hg-fg);
}
.btn-danger { background-color: var(--hg-danger); border-color: var(--hg-danger); }

/* focus ring — site-blue, soft */
.btn:focus,
.btn-primary:focus,
a.button:focus,
#rcmloginsubmit:focus {
  box-shadow: 0 0 0 .2rem rgba(11, 99, 229, .25) !important;
}

/* ---------- forms ---------- */
.custom-select,
.custom-file-label,
.form-control {
  color: var(--hg-fg);
  border-color: var(--hg-border);
  border-radius: var(--hg-radius-sm);
}
.form-control:focus,
.custom-select:focus {
  color: var(--hg-fg);
  border-color: var(--hg-primary);
  box-shadow: 0 0 0 .2rem rgba(11, 99, 229, .18);
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--hg-primary);
  border-color: var(--hg-primary);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; }
input::placeholder, textarea::placeholder { color: #9aa1a9; }

/* ---------- popovers, dialogs, alerts ---------- */
.popover { border-color: var(--hg-border); border-radius: var(--hg-radius-sm); }
.ui-widget-content, .ui-dialog { border-radius: var(--hg-radius-sm); }
.ui.alert { border-radius: var(--hg-radius-sm); }
.ui.alert.boxconfirmation, #messagestack .alert-success { background-color: #e9f2ec; color: #116239; }
.ui.alert.boxerror,       #messagestack .alert-danger  { background-color: #f6e7e2; color: #8a2c07; }
.ui.alert.boxinformation, #messagestack .alert-info    { background-color: #e7eff1; color: #0a4a80; }
.ui.alert.boxwarning,     #messagestack .alert-warning { background-color: #f7ecd7; color: #7a5a10; }
.ui.alert a:not(.btn) { color: inherit; text-decoration: underline; }

/* ---------- login screen: hangarville.com look ---------- */
.task-login #layout-content {
  background-color: #f0efeb;
  background-image:
    linear-gradient(rgba(14,31,51,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,31,51,0.05) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
}
/* hero grid layer exactly as www: wrapper at 50% */
.task-login #layout-content::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
}
.task-login #logo {
  position: relative;
  top: 0;
  margin-top: 6vh;
  max-height: 72px;
}
#login-form {
  position: relative;
  top: 0;
  margin-top: 3vh;
  max-width: 380px;
  width: 92%;
  text-align: left;
  background: var(--hg-card);
  border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius);
  box-shadow: var(--hg-shadow);
  padding: 1.6rem 1.6rem 1.2rem;
}
#login-form table,
#login-form tbody { display: block; }
#login-form .row { margin-right: 0; margin-left: 0; }
/* Elastic ui.js hides td.title and turns labels into input placeholders with icon prepends
   (input-group input-group-lg). Keep that structure intact: */
#login-form .input-group-text {
  background-color: var(--hg-mutedbg);
  border-color: var(--hg-border);
  color: var(--hg-fg-muted);
  width: 2.6rem;
}
#login-form .form-control {
  height: 2.9rem;
  font-size: 1rem;
  background-color: var(--hg-card);
}
#login-form .input-group { margin-bottom: 1rem; }
#login-form .form-control {
  height: 2.9rem;
  font-size: 1rem;
  background-color: var(--hg-card);
}
#login-form .formbuttons {
  padding: .4rem 0 0;
}
#rcmloginsubmit {
  display: inline-block;
  width: 100%;
  height: 2.9rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--hg-radius-sm);
}
#login-footer {
  margin: 1.1rem 0 0;
  padding: 0;
  color: var(--hg-fg-muted);
  font-size: .85rem;
}
#login-footer > div {
  margin-top: .35rem;
  padding: 0;
  background: none;
}
#login-footer a { color: var(--hg-link); text-decoration: none; }
#login-footer a:hover { text-decoration: underline; }

/* ---------- dark mode retint (Elastic handles structure; we swap accent surfaces) ---------- */
html.dark-mode body { background-color: #12151d; color: #e6e9ef; }
html.dark-mode #layout-list,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-content,
html.dark-mode #layout > div > .footer { background-color: transparent; border-color: #2a2f3a; }
html.dark-mode #layout > div > .header {
  background-color: #12151d;
  border-color: #2a2f3a;
  color: #e6e9ef;
}
html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #taskmenu .special-buttons {
  background-color: #0a1220 !important;
}
html.dark-mode .btn-primary,
html.dark-mode .button.mainaction,
html.dark-mode #rcmloginsubmit { background-color: var(--hg-primary); border-color: var(--hg-primary); color: #fff !important; }
html.dark-mode .btn-primary:hover:not(:disabled), html.dark-mode .button.mainaction:hover { background-color: var(--hg-primary-h); }
html.dark-mode .listing tr.selected td,
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a {
  color: #dbe7ff;
  background-color: rgba(11, 99, 229, .28);
}
html.dark-mode #messagestack .alert-info,
html.dark-mode .ui.alert.boxinformation { background-color: #0e2a45; color: #bcd6ef; }
html.dark-mode #messagestack .alert-danger,
html.dark-mode .ui.alert.boxerror { background-color: #3d1a0c; color: #f3c3b0; }
html.dark-mode #messagestack .alert-success,
html.dark-mode .ui.alert.boxconfirmation { background-color: #10331f; color: #b5e3c7; }
html.dark-mode #messagestack .alert-warning,
html.dark-mode .ui.alert.boxwarning { background-color: #3a2e0d; color: #ecd69a; }
html.dark-mode .form-control { background-color: #161a23; color: #e6e9ef; border-color: #2a2f3a; }
html.dark-mode .form-control:focus { background-color: #1a1f2b; border-color: var(--hg-primary); }
html.dark-mode #login-form { background: #141821; border-color: #2a2f3a; }
html.dark-mode .searchbar { background-color: transparent; border-color: #2a2f3a; }

/* selection */
::selection { background: rgba(11, 99, 229, .25); }

/* scrollbars */
html:not(.touch) { scrollbar-color: #c9cfd6 var(--hg-mutedbg); }
html:not(.touch) ::-webkit-scrollbar-track { background-color: var(--hg-mutedbg); }
html:not(.touch) ::-webkit-scrollbar-thumb { background-color: #c9cfd6; border-radius: 6px; }

/* logo link: whole mark + wordmark clickable to site (Elastic adds onclick when skin_logo[link] set) */
#logo { border-radius: var(--hg-radius-sm); }
/* ---- rail logo: stacked lockup, slightly wider box (Elastic caps 78px) ---- */
#layout-menu .popover-header img#logo {
  max-width: 96px !important;
  max-height: 58px !important;
  width: auto; height: auto;
}
html.dark-mode #logo { opacity: 1; }