* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #3a6ea5;
  color: #000;
  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
  font-size: 11px;
}
button, input { font: inherit; color: inherit; }
button { cursor: default; }
.desktop { height: 100%; padding: 10px; }
.win {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #d4d0c8;
  border: 2px solid #d4d0c8;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #404040, 0 0 0 1px #000;
  min-width: 860px;
}
.titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 3px 0 4px;
  background: linear-gradient(#0a57d6, #0054e3 45%, #0849b8);
  color: #fff;
  font-weight: 700;
}
.title { flex: 1; white-space: nowrap; overflow: hidden; }
.title-icon {
  width: 14px; height: 14px;
  background: linear-gradient(#f6e27a, #c45c12);
  border: 1px solid #fff;
}
.winbtns { display: flex; gap: 2px; }
.winbtns span {
  width: 16px; height: 14px; line-height: 12px; text-align: center;
  background: #d4d0c8; color: #000; font-weight: 400;
  border-top: 1px solid #fff; border-left: 1px solid #fff;
  border-right: 1px solid #404040; border-bottom: 1px solid #404040;
}
.menubar { display: flex; gap: 2px; padding: 2px 4px; background: #d4d0c8; position: relative; }
.menubar button, .toolbar button {
  background: transparent; border: 1px solid transparent; padding: 2px 7px;
}
.menubar button:hover, .menubar button.open, .toolbar button:hover {
  background: #0a246a; color: #fff; border-color: #0a246a;
}
.menu-pop {
  position: absolute; z-index: 5; left: 8px; top: 46px;
  min-width: 180px; background: #d4d0c8; padding: 2px;
  border-top: 1px solid #fff; border-left: 1px solid #fff;
  border-right: 1px solid #404040; border-bottom: 1px solid #404040;
  box-shadow: 2px 2px 0 #808080;
}
.menu-pop button {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; padding: 3px 18px;
}
.menu-pop button:hover { background: #0a246a; color: #fff; }
.menu-pop button:disabled { color: #808080; }
.menu-pop button:disabled:hover { background: transparent; color: #808080; }
.infobar {
  background: #ffffe1; border-top: 1px solid #fff; border-bottom: 1px solid #808080;
  padding: 3px 8px;
}
.infobar a { color: #0a246a; margin-left: 8px; }
.toolbar input[type="text"], .toolbar input[type="number"] {
  background: #fff; border: 2px inset #d4d0c8; padding: 1px 4px;
}
.toolbar input[type="text"] { width: 120px; }
.toolbar input[type="number"] { width: 48px; }
.toolbar button:disabled { color: #808080; }
table.grid tr.fail td { color: #800000; }
table.grid tr.fail.selected td { color: #fff; }
.toolbar {
  display: flex; align-items: center; gap: 3px; padding: 3px 4px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
}
.toolbar button {
  background: #d4d0c8;
  border-top: 1px solid #fff; border-left: 1px solid #fff;
  border-right: 1px solid #404040; border-bottom: 1px solid #404040;
  padding: 2px 8px;
}
.toolbar button:active { border-color: #404040 #fff #fff #404040; }
.sep { width: 8px; }
.spacer { flex: 1; }
.search input {
  width: 160px; background: #fff; border: 2px inset #d4d0c8; padding: 1px 4px;
}
.workspace { flex: 1; min-height: 0; display: flex; background: #d4d0c8; }
.folders {
  width: 176px; flex: none; overflow: auto; background: #fff;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-bottom: 1px solid #fff; border-right: 1px solid #fff;
  margin: 3px 0 3px 3px; padding: 2px 0;
}
.folder {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 2px 6px 2px 16px;
}
.folder.selected { background: #0a246a; color: #fff; }
.folder .count { color: inherit; }
.splitter { width: 4px; cursor: col-resize; background: #d4d0c8; flex: none; }
.center { flex: 1.2; min-width: 280px; display: flex; flex-direction: column; margin: 3px 0; }
.preview {
  flex: 1; min-width: 240px; margin: 3px 3px 3px 0; overflow: auto;
  background: #fff8e7;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-bottom: 1px solid #fff; border-right: 1px solid #fff;
  padding: 8px 10px;
}
.gridwrap {
  flex: 1; overflow: auto; background: #fff;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-bottom: 1px solid #fff; border-right: 1px solid #fff;
}
table.grid { width: 100%; border-collapse: collapse; background: #fff; }
table.grid th {
  position: sticky; top: 0; background: #d4d0c8; text-align: left; font-weight: 400;
  border-right: 1px solid #808080; border-bottom: 1px solid #808080;
  padding: 2px 6px; white-space: nowrap;
}
table.grid td { padding: 1px 6px; border-bottom: 1px solid #ece9d8; white-space: nowrap; }
table.grid tr.unread td { font-weight: 700; }
table.grid tr.selected td { background: #0a246a; color: #fff; }
table.grid tr { cursor: default; }
.pane-head {
  background: #d4d0c8; padding: 2px 6px; border: 1px solid #808080; margin-bottom: 2px;
}
.memo h2 { font-size: 13px; margin: 0 0 8px; font-family: "Times New Roman", Times, serif; }
.memo .meta { margin: 0 0 8px; }
.memo .meta div { margin: 1px 0; }
.memo .body { white-space: pre-wrap; font-family: "Times New Roman", Times, serif; font-size: 13px; line-height: 1.35; }
.empty { padding: 12px; color: #404040; }
.week { position: relative; display: grid; grid-template-columns: 42px repeat(7, 1fr); flex: 1; overflow: auto; background: #fff; border: 2px inset #fff; }
.week .hours { grid-column: 1; }
.hour-label { height: 42px; text-align: right; padding-right: 4px; color: #404040; border-bottom: 1px solid #ece9d8; }
.daycol { border-left: 1px solid #c0c0c0; background: #fff; }
.daycol.weekend { background: #f3f3f3; }
.daycol header { position: sticky; top: 0; background: #d4d0c8; border-bottom: 1px solid #808080; padding: 2px 4px; z-index: 1; height: 18px; }
.daybody { position: relative; }
.hours { padding-top: 18px; }
.slotline { height: 42px; border-bottom: 1px solid #ece9d8; }
.block {
  position: absolute; left: 2px; right: 2px; overflow: hidden;
  background: #c6d9f1; border: 1px solid #0a246a; padding: 1px 3px; font-size: 10px;
}
.block.selected { background: #0a246a; color: #fff; }
.calnav { display: flex; gap: 4px; margin-bottom: 3px; }
.ctx {
  position: fixed; z-index: 9; min-width: 210px; background: #d4d0c8; padding: 2px;
  border-top: 1px solid #fff; border-left: 1px solid #fff;
  border-right: 1px solid #404040; border-bottom: 1px solid #404040;
  box-shadow: 2px 2px 0 #808080;
}
.ctx button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 3px 16px; }
.ctx button:hover:not(:disabled) { background: #0a246a; color: #fff; }
.ctx button:disabled { color: #808080; }
.statusbar {
  display: flex; gap: 8px; align-items: center; height: 20px; padding: 0 4px;
  background: #d4d0c8; border-top: 1px solid #fff;
}
.statusbar span {
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-right: 1px solid #fff; border-bottom: 1px solid #fff;
  padding: 0 6px; background: #d4d0c8; line-height: 16px;
}
#status-left { flex: 1; }
@media (max-width: 900px) {
  .win { min-width: 0; }
  .preview, #preview-split { display: none; }
  .folders { width: 132px; }
}